A jQuery kód
$(function(){
$('div.page:not(.active)').hide();
});
$(function(){
$('div.page').css({'height':$(window).height()});
});
$(function(){
$('ul.navigation a').live('click',function(){
var page ="";
page = $(this).attr('href');
if($(page).hasClass('active')){
} else {
$('div.active').removeClass('active');
$(page).addClass('active');
$('div.page:not(.active)').slideUp(600);
$('.active').slideToggle(600);
}
return false;
});
});
// Changing class of menu if scroll is more than 100
$(function(){
$('div.page').scroll(function() {
pageScrolltop = $('div.page').scrollTop();
pageHeight = $('div.page').height();
if($('div.page').scrollTop() + $('div.page').height() == $('div.page').height()) {
// $('.navigation').attr('class', 'navigationsolid');
}
});
});
A HTML kódrészlet
<ul class="navigation">
<li><a href="#home">jQuery parallax design</a></li>
<li><a href="#jquery">A jQuery</a></li>
<li><a href="#htmlcss">HTML és CSS</a></li>
<li><a href="#about">Mit szerenék elérni</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="page" id="home">
...// content //...
</div>
<div class="page" id="jquery">
...// content //...
</div>
<div class="page" id="htmlcss">
...// content //...
</div>
<div class="page" id="about">
...// content //...
</div>
<div class="page" id="contact">
...// content //...
</div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic&subset=latin,latin-ext);
*,html,body {
padding:0;
margin:0;
}
body {
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
}
h1,h2,h3,h4,h5,h6, ul.navigation a { font-family: 'Open Sans Condensed', sans-serif;}
div.page {
overflow: auto;
box-shadow:0px 0px 100px #000;
padding:75px 10px 10px 10px;
}
ul.navigation {
background-color: rgba(0,0,0,0.3);
display: block;
padding: 5px;
position: fixed;
top: 0px;
right: 0px;
height: 45px;
left: 0px;
}
ul.navigationsolid {
background-color: #000);
display: block;
padding: 5px;
position: fixed;
top: 0px;
right: 0px;
height: 45px;
left: 0px;
}
ul.navigation li,ul.navigationsolid li {
display: inline-block;
}
ul.navigation li a, ul.navigationsolid li a{
font-size: 16pt;
font-weight: bold;
color: #FFF;
display: block;
text-decoration: none;
padding-right: 10px;
padding-left: 10px;
line-height: 45px;
}
div#home {
background-color: #EFEFEF;
}
div#home h1{
color: #333;
}
div#jquery {
background-color: #841C1C;
color: #FFF;
}
div#jquery h1{
color: #FFF;
}
div#htmlcss {
background-color: #7E2712;
}
div#htmlcss h1{
color: #FFF;
}
div#about {
background-color: #6A160D;
}
div#about h1{
color: #FFF;
}
div#contact {
background-color: #FFF;
}
div#contact h1{
color: #841C1C;
}