代码如下: /* 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 }; })();
