当滚动命中特定部分时，运行$（＆＃39;＆＃39;）。animate（）

Question

我有滚动内容的问题。

我仍然是jquery的新手，我刚刚成功地让酒吧变得有生气，因为我点击某个＆＃39; a＆＃39;标记，并使窗口滚动到某个div＃id，其中＆＃39; a＆＃39; tag有href（作为锚点），但我希望它像用户向下滚动或向上滚动到某个部分div＃id，动画栏移动到其导航＆＃39; a＆＃39;表明这是活动页面。你能帮忙吗，我会非常感激......

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/

Answer 1

Psuedo代码：

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