固定背景實現的背景滾動特效示例

　　分享一個來自corpse的固定背景滾動特效使用backgroundattachment: fixed和導航菜單頁面會非常平滑的滾動 

　　HTML

代碼如下:
<div id="cbpfbscroller" class="cbpfbscroller">
<nav>
<a href="#fbsection" class="cbpfbcurrent">Section </a>
<a href="#fbsection">Section </a>
<a href="#fbsection">Section </a>
<a href="#fbsection">Section </a>
<a href="#fbsection">Section </a>
</nav>
<section id="fbsection"></section>
<section id="fbsection"></section>
<section id="fbsection"></section>
<section id="fbsection"></section>
<section id="fbsection"></section>
</div>

　　
CSS

 代碼如下:
/* Set all parents to full height */
html body
container
cbpfbscroller
cbpfbscroller section {
height: %;
}
/* The nav is fixed on the right side and we center it by translating it %
(we dont know its height so we cant use the negative margin trick) */
cbpfbscroller > nav {
position: fixed;
zindex: ;
right: px;
top: %;
webkittransform: translateY(%);
moztransform: translateY(%);
mstransform: translateY(%);
transform: translateY(%);
}
cbpfbscroller > nav a {
display: block;
position: relative;
color: transparent;
height: px;
}
cbpfbscroller > nav a:after {
content: ;
position: absolute;
width: px;
height: px;
borderradius: %;
border: px solid #fff;
}
cbpfbscroller > nav a:hover:after {
background: rgba();
}
cbpfbscroller > nav acbpfbcurrent:after {
background: #fff;
}
/* backgroundattachment does the trick */
cbpfbscroller section {
position: relative;
backgroundposition: top center;
backgroundrepeat: norepeat;
backgroundsize: cover;
backgroundattachment: fixed;
}
#fbsection {
backgroundimage: url(/images/jpg);
}
#fbsection {
backgroundimage: url(/images/jpg);
}
#fbsection {
backgroundimage: url(/images/jpg);
}
#fbsection {
backgroundimage: url(/images/jpg);
}
#fbsection {
backgroundimage: url(/images/jpg);
}

　　
Javascript

 代碼如下:
/**
* cbpFixedScrollLayoutjs v
*
*
* Licensed under the MIT license
*
*
* Copyright Codrops
*
*/
var cbpFixedScrollLayout = (function() {
// cache and initialize some values
var config = {
// the cbpfbscroller′s sections
$sections : $( #cbpfbscroller > section )
// the navigation links
$navlinks : $( #cbpfbscroller > nav:first > a )
// index of current link / section
currentLink :
// the body element
$body : $( html body )
// the body animation speed
animspeed :
// the body animation easing (jquery easing)
animeasing : easeInOutExpo
};
function init() {
// click on a navigation link: the body is scrolled to the position of the respective section
config$navlinkson( click function() {
scrollAnim( config$sectionseq( $( this )index() )offset()top );
return false;
} );
// waypoints defined:
// First one when we scroll down: the current navigation link gets updated
// A `new section′ is reached when it occupies more than % of the viewport
// Second one when we scroll up: the current navigation link gets updated
// A `new section′ is reached when it occupies more than % of the viewport
config$sectionswaypoint( function( direction ) {
if( direction === down ) { changeNav( $( this ) ); }
} { offset: % } )waypoint( function( direction ) {
if( direction === up ) { changeNav( $( this ) ); }
} { offset: % } );
// on window resize: the body is scrolled to the position of the current section
$( window )on( debouncedresize function() {
scrollAnim( config$sectionseq( configcurrentLink )offset()top );
} );
}
// update the current navigation link
function changeNav( $section ) {
config$navlinkseq( configcurrentLink )removeClass( cbpfbcurrent );
configcurrentLink = $sectionindex( section );
config$navlinkseq( configcurrentLink )addClass( cbpfbcurrent );
}
// function to scroll / animate the body
function scrollAnim( top ) {
config$bodystop()animate( { scrollTop : top } configanimspeed configanimeasing );
}
return { init : init };
})(); 
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20507.html