javascript实现全屏页面滚动导航跟随定位效果

  <div class="container">
        <div class="wrapper">
            <div class="section" id="section1">section1</div>
            <div class="section" id="section2">section2</div>
            <div class="section" id="section3">section3</div>
            <div class="section" id="section4">section4</div>
            <div class="section" id="section5">section5</div>
        </div>
        <nav>
            <a href="#section1" class="current">section1</a>
            <a href="#section2">section2</a>
            <a href="#section3">section3</a>
            <a href="#section4">section4</a>
            <a href="#section5">section5</a>
        </nav>
    </div>

<script>
        var $navs = $('nav a');
        var $sections = $('.section');
        var $window = $(window);
        var navLength = $navs.length - 1;
        $window.on('scroll', function() {
    
    
            scrollTop = $window.scrollTop();
            for (var len = navLength; len > -1; len--) {
    
    
                var that = $sections.eq(len);
                if(scrollTop >= that.offset().top){
    
    
                    $navs.removeClass('current').eq(len).addClass('current');break;
                }
            }
        })
    </script>