jQuery实现带滚动导航效果的全屏滚动相册实例-前端开发

至此，就完成了带滚动导航效果的全屏滚动相册实例，效果如下：https://codepen.io/miccjiang/pen/RmgMPv

准备工作：
本实例需要用到jQuery、fullpage.js和TweenMax.js，所以在开始之前要确保已经引入了这些库文件。

<head>
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/fullPage.js/2.9.7/jquery.fullPage.min.js"></script>
    <script src="//cdn.bootcss.com/gsap/1.20.4/TweenMax.min.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/fullPage.js/2.9.7/jquery.fullPage.min.css">
</head>

创建导航栏：
创建一个包含所有页面锚点的导航栏，使用fullpage.js进行滚动切换。

<body>
    <div class="navbar">
        <ul>
            <li data-menuanchor="page1" class="active"><a href="#page1">Page 1</a></li>
            <li data-menuanchor="page2"><a href="#page2">Page 2</a></li>
            <li data-menuanchor="page3"><a href="#page3">Page 3</a></li>
            <li data-menuanchor="page4"><a href="#page4">Page 4</a></li>
            <li data-menuanchor="page5"><a href="#page5">Page 5</a></li>
        </ul>
    </div>
    <div id="fullpage">
        <div class="section page1" data-anchor="page1">Page 1</div>
        <div class="section page2" data-anchor="page2">Page 2</div>
        <div class="section page3" data-anchor="page3">Page 3</div>
        <div class="section page4" data-anchor="page4">Page 4</div>
        <div class="section page5" data-anchor="page5">Page 5</div>
    </div>
</body>

<script>
    $(document).ready(function() {
        $('#fullpage').fullpage({
            anchors: ['page1', 'page2', 'page3', 'page4', 'page5']
        });
    });
</script>

导航效果：
添加样式和交互效果，实现导航菜单的滑动效果。使用TweenMax.js库为导航添加动画。

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 1000;
    background-color: rgba(0,0,0,0.7);
    transition: background-color 0.5s ease;
}

.navbar.active {
    background-color: rgba(0,0,0,0.4);
}

.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

.navbar ul li {
    display: inline-block;
    margin-right: 30px;
    padding: 0 10px;
    cursor: pointer;
}

.navbar ul li.active {
    color: #fff;
    border-bottom: 2px solid #fff;
}

.navbar ul li a {
    color: #fff;
    text-decoration: none;
}

.navbar ul li a:hover {
    color: #ED6B64;
}

.navbar .line {
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 3px;
    width: 50px;
    background-color: #ED6B64;
    transform: translateX(-50%);
}

.navbar ul li.active .line {
    width: 100%;
    transition: width 0.5s ease;
}

.navbar ul li:hover .line {
    width: 100%;
    transition: width 0.5s ease;
}

.active .line {
    width: 100%;
}

$(document).ready(function() {
    var $sections = $('.section');
    var $nav = $('.navbar ul');

    $(window).on('scroll', function() {
        var cur_pos = $(this).scrollTop();

        $sections.each(function() {
            var top = $(this).offset().top - 100;
            var bottom = top + $(this).outerHeight();

            if (cur_pos >= top && cur_pos <= bottom) {
                $nav.find('li').removeClass('active');
                $sections.removeClass('active');

                $(this).addClass('active');
                $nav.find('a[href="#'+$(this).attr('id')+'"]').parent().addClass('active');
            }
        });
    });

    $nav.on('click', 'a', function(e) {
        e.preventDefault();
        var id = $(this).attr('href');

        $('html, body').animate({
            scrollTop: $(id).offset().top - 50
        }, 500);
    });

    var $line = $('<div>', { class: 'line' });

    $line.appendTo($nav);

    var active_nav = $nav.find('li.active');

    $line.css({
        'left': active_nav.position().left,
        'width': active_nav.outerWidth()
    });

    $nav.find('li').hover(function() {
        $line.css({
            'left': $(this).position().left,
            'width': $(this).outerWidth()
        });
    }, function() {
        $line.css({
            'left': active_nav.position().left,
            'width': active_nav.outerWidth()
        });
    });

    TweenMax.to('.navbar', 0.5, {
        backgroundColor: 'rgba(0,0,0,0.4)'
    });

    TweenMax.staggerFrom('.navbar li', 0.5, {
        opacity: 0,
        y: 30,
        delay: 0.2,
        ease: Power3.easeOut
    }, 0.1);
});

至此，就完成了带滚动导航效果的全屏滚动相册实例，效果如下：https://codepen.io/miccjiang/pen/RmgMPv

示例1：可以通过修改css中的相关样式调整导航菜单的外观，例如背景颜色、字体颜色等。示例代码如下：

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 1000;
    /* 修改 */
    background-color: rgba(255,255,255,0.7);
    transition: background-color 0.5s ease;
}

.navbar.active {
    /* 修改 */
    background-color: rgba(255,255,255,0.4);
}

.navbar ul li a {
    /* 修改 */
    color: #ED6B64;
    text-decoration: none;
}

.navbar ul li a:hover {
    /* 修改 */
    color: #333;
}

示例2：可以在滚动到某个页面时添加不同的动画效果。例如，在滚动到第2页时，页面中的图片逐渐从下方移入；在滚动到第3页时，页面中的文字逐渐透明。示例代码如下：

$(window).on('scroll', function() {
    var cur_pos = $(this).scrollTop();

    $sections.each(function() {
        var top = $(this).offset().top - 100;
        var bottom = top + $(this).outerHeight();

        if (cur_pos >= top && cur_pos <= bottom) {
            $nav.find('li').removeClass('active');
            $sections.removeClass('active');

            $(this).addClass('active');
            $nav.find('a[href="#'+$(this).attr('id')+'"]').parent().addClass('active');

            /* 修改 */
            if ($(this).hasClass('page2')) {
                TweenMax.staggerFrom('.page2 img', 1, {
                    opacity: 0,
                    y: 30,
                    ease: Power3.easeOut
                }, 0.1);   
            } else if ($(this).hasClass('page3')) {
                TweenMax.staggerTo('.page3 h1, .page3 p', 1, {
                    opacity: 0,
                    ease: Power3.easeOut
                }, 0.1);               
            }
        }
    });
});

基础教程推荐