javascript - 在滚动到达特定部分时运行$('a')。animate()

我在滚动内容时遇到问题。

我对jQuery还是陌生的，我只是成功地使栏成为动画，因为我单击了某个“ a”标签，并使窗口滚动到“ a”标签具有href的某些div＃id（作为锚点），但是我希望它像当用户向下或向上滚动到特定部分div＃id时，动画条移动到其导航“ a”，指示这是活动页面。您能帮忙吗，我会非常感激...

的HTML

   <!---------- navigation container [1] ---------->
    <div class="navigation-container">
        <div class="navigation-wrapper">
            <ul>
                <li class="home"><a href="#home-container">HOME</a></li>
                <li class="about"><a href="#about-container">ABOUT</a></li>
                <li class="services"><a href="#services-container">SERVICES</a></li>
                <li class="logo"><a href="#logo-container"><span style="visibility:hidden">LOGO</span></a></li>
                <li class="clients"><a href="#clients-container">CLIENTS</a></li>
                <li class="portfolio"><a href="#portfolio-container">PORTFOLIO</a></li>
                <li class="contact"><a href="#contact-container">CONTACT</a></li>
            </ul>
            <div class="bar-active"></div>
        </div>
    </div>
    <!---------- navigation container [1] ---------->

    <!---------- home container [1] ---------->
    <div id="home-container">HOME</div>
    <!---------- home container [1] ---------->

    <!---------- about container [1] ---------->
    <div id="about-container">ABOUT</div>
    <!---------- about container [1] ---------->

    <!---------- services container [1] ---------->
    <div id="services-container">SERVICES</div>
    <!---------- services container [1] ---------->

    <!---------- clients container [1] ---------->
    <div id="clients-container">CLIENTS</div>
    <!---------- clients container [1] ---------->

    <!---------- portfolio container [1] ---------->
    <div id="portfolio-container">PORTFOLIO</div>
    <!---------- portfolio container [1] ---------->

    <!---------- contact container [1] ---------->
    <div id="contact-container">CONTACT</div>
    <!---------- contact container [1] ---------->

    <script>
        // JavaScript Document

    //as document is ready [1]
    $(document).ready (function(){


    //  active bar navigation moving [2]
    $('li.home').click(function(){
        $('div.bar-active').animate({left:'25px'},1000);
    });
    $('li.about').click(function(){
        $('div.bar-active').animate({left:'148px'},1000);
    });
    $('li.services').click(function(){
        $('div.bar-active').animate({left:'270px'},1000);
    });
    $('li.clients').click(function(){
        $('div.bar-active').animate({left:'635px'},1000);
    });
    $('li.portfolio').click(function(){
        $('div.bar-active').animate({left:'758px'},1000);
    });
    $('li.contact').click(function(){
        $('div.bar-active').animate({left:'881px'},1000);
    });
    //  active bar navigation moving [2]


    //  scrolling anchor anim [2]
    $(function(){
        $('.navigation-wrapper a').on('click', function(e){
            e.preventDefault();
            var scrolldiv = $(this).attr('href');
            $(scrolldiv).animatescroll({padding:50});
        });
    });
    //  scrolling anchor anim [2]
});
//as document is ready [1]
</script>

的CSS

body {padding: 0; margin: 0;}

/*---------- header container [1] ----------*/
.navigation-container {width:100%; height:60px; background-color:#1a1a1a; position:fixed; top:0px;}
.navigation-wrapper {width:1015px; height:60px; background-color:#1a1a1a; margin:auto; font-family:oswaldbook; text-align:center; position:relative; color:#ededee;}
.navigation-wrapper ul { display:block; width:1015px; height:60px; background-color:#1a1a1a; margin-top:0px; padding:0px;}
.navigation-wrapper ul li {list-style:none; display:inline-block; background-color:#1a1a1a; text-decoration:none; }
.navigation-wrapper ul li a {display:block; height:40px; width:120px; display:block; cursor:pointer; background-color: #1a1a1a; padding-top:20px; text-decoration:none; color: #ededee; }
.navigation-wrapper ul li a:hover {color:white;}
.navigation-wrapper ul li.logo a { width:238px; height: 40px; display:block; display:block; background-color:none;}
.bar-active { width:111px; height:20px; background-color:yellow; position:absolute; left:25px; top:50px; z-index:1;}

/*---------- home container [1] ----------*/
#home-container {width:100%; height:600px; background-color:#ededee; margin-top:60px; padding-top:90px; padding-bottom:90px;}

/*---------- about container [1] ----------*/
#about-container {width:100%; height:600px; background-color:gold;padding-top:90px; }

/*---------- services container [1] ----------*/
#services-container {width:100%; height:600px; background-color:brown;padding-top:90px; }

/*---------- clients container [1] ----------*/
#clients-container {width:100%; height:600px; background-color:gold;padding-top:90px; }

/*---------- portfolio container [1] ----------*/
#portfolio-container {width:100%; height:600px; background-color:silver;padding-top:90px; }

/*---------- contact container [1] ----------*/
#contact-container {width:100%; height:600px; background-color:pink;padding-top:90px; }

这是我的小提琴：http://jsfiddle.net/Herza/y3GB4/1/

最佳答案

伪代码：

$(window).scroll(function(){
     var top = $(window).scrollTop();
     if( top > 200 ) {
         // Enable A
     } else if( top > 400 ) {
        // Enable B
    }
});

关于javascript - 在滚动到达特定部分时运行$('a')。animate()，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23323787/