固定背景滚动布局

查看演示立即下载

插件描述：jQuery固定背景滚动布局,同时固定导航，页面将平滑地滚动到所选的部分。

实现代码

HTML

<div id="cbp-fbscroller" class="cbp-fbscroller">
    <nav>
        <a href="#fbsection1" class="cbp-fbcurrent">Section 1</a>
        <a href="#fbsection2">Section 2</a>
        <a href="#fbsection3">Section 3</a>
        <a href="#fbsection4">Section 4</a>
        <a href="#fbsection5">Section 5</a>
    </nav>
        <section id="fbsection1"></section>
        <section id="fbsection2"></section>
        <section id="fbsection3"></section>
        <section id="fbsection4"></section>
        <section id="fbsection5"></section>
</div>

CSS

/* Set all parents to full height */
html,body,.container,.cbp-fbscroller,.cbp-fbscroller section {
    height:100%;
}
/* The nav is fixed on the right side  and we center it by translating it 50% 
(we don't know it's height so we can't use the negative margin trick) */
.cbp-fbscroller > nav {
    position:fixed;
    z-index:9999;
    right:100px;
    top:50%;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
}
.cbp-fbscroller > nav a {
    display:block;
    position:relative;
    color:transparent;
    height:50px;
}
.cbp-fbscroller > nav a:after {
    content:'';
    position:absolute;
    width:24px;
    height:24px;
    border-radius:50%;
    border:4px solid #fff;
}
.cbp-fbscroller > nav a:hover:after {
    background:rgba(255,255,255,0.6);
}
.cbp-fbscroller > nav a.cbp-fbcurrent:after {
    background:#fff;
}
/* background-attachment does the trick */
.cbp-fbscroller section {
    position:relative;
    background-position:top center;
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed;
}
#fbsection1 {
    background-image:url(../images/1.jpg);
}
#fbsection2 {
    background-image:url(../images/2.jpg);
}
#fbsection3 {
    background-image:url(../images/3.jpg);
}
#fbsection4 {
    background-image:url(../images/4.jpg);
}
#fbsection5 {
    background-image:url(../images/5.jpg);

JavaScript

var cbpFixedScrollLayout = (function() {
    // cache and initialize some values
    var config = {
        // the cbp-fbscroller′s sections
        $sections : $( '#cbp-fbscroller > section' ),
        // the navigation links
        $navlinks : $( '#cbp-fbscroller > nav:first > a' ),
        // index of current link / section
        currentLink : 0,
        // the body element
        $body : $( 'html, body' ),
        // the body animation speed
        animspeed : 650,
        // 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.$navlinks.on( 'click', function() {
            scrollAnim( config.$sections.eq( $( this ).index() ).offset().top );
            return false;
        } );
 
        // 2 waypoints defined:
        // First one when we scroll down: the current navigation link gets updated. 
        // A `new section′ is reached when it occupies more than 70% 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 70% of the viewport
        config.$sections.waypoint( function( direction ) {
            if( direction === 'down' ) { changeNav( $( this ) ); }
        }, { offset: '30%' } ).waypoint( function( direction ) {
            if( direction === 'up' ) { changeNav( $( this ) ); }
        }, { offset: '-30%' } );
 
        // on window resize: the body is scrolled to the position of the current section
        $( window ).on( 'debouncedresize', function() {
            scrollAnim( config.$sections.eq( config.currentLink ).offset().top );
        } );
         
    }
    // update the current navigation link
    function changeNav( $section ) {
        config.$navlinks.eq( config.currentLink ).removeClass( 'cbp-fbcurrent' );
        config.currentLink = $section.index( 'section' );
        config.$navlinks.eq( config.currentLink ).addClass( 'cbp-fbcurrent' );
    }
 
    // function to scroll / animate the body
    function scrollAnim( top ) {
        config.$body.stop().animate( { scrollTop : top }, config.animspeed, config.animeasing );
    }
    return { init : init };
 
})();

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jquery响应式垂直时间轴插件vertical-timeline
下一个特效：超炫酷css3登录界面