滚动导航栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            width: 100%;
            padding-bottom: 500px;

        }
        .wrapper{
            width:100%;

        }
        .section{
            width:100%;
            height:500px;

        }
        nav{
            position: fixed;
            right:0;
            top:100px;
            background-color: #fff;
        }
        nav a{
            display: block;
            width:200px;
            height:40px;
            line-height: 40px;
            text-align: center;
            text-decoration: none;

        }
        .current{
            color: #fff;
            background-color: #3480e6;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="wrapper">
        <div class="section" style="background-color: pink;" id="section1">section1</div>
        <div class="section" style="background-color: yellow;" id="section2">section2</div>
        <div class="section" style="background-color: hotpink;" id="section3">section3</div>
        <div class="section" style="background-color: lavender;"  id="section4">section4</div>
        <div class="section" style="background-color: lightpink;" id="section5">section5</div>
    </div>
    <nav>
        <a href="#section1"  rel="external nofollow" class="current">section1</a>
        <a href="#section2"  rel="external nofollow" >section2</a>
        <a href="#section3"  rel="external nofollow" >section3</a>
        <a href="#section4" rel="external nofollow" >section4</a>
        <a href="#section5"  rel="external nofollow" >section5</a>
    </nav>
</div>

<script src="lib/jquery.min.js"></script>
<script>
    var $navs = $('nav a'),          // 导航
            $sections = $('.section'),       // 模块
            $window = $(window),
            navLength = $navs.length - 1;

    $window.on('scroll', function() {
        var scrollTop = $window.scrollTop(),
                len = navLength;

        for (; len > -1; len--) {
            var that = $sections.eq(len);
            if (scrollTop >= that.offset().top) {
                $navs.removeClass('current').eq(len).addClass('current');
                break;
            }
        }
    });
    $navs.on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({
            'scrollTop': $($(this).attr('href')).offset().top//获得位移高度

        }, 400);
    });
</script>
</body>
</html>
猜你喜欢
