ユーザーが特定の位置にスクロールしたときに要素のCSSプロパティを変更する

Question

ユーザーがjqueryの特定のdiv位置までスクロールしてもナビゲーションバーのcssプロパティを操作しようとしましたが、これは私が何をしたか

<nav class="topnav"></nav> //position:fixed 
<section id="aboutus></section> 
<section id="members></section> 
<section id="events></section> 

下に何をしたかであることは、ユーザのスクロール位置を取得し、また、位置iのターゲットだ要素の位置を取得することでした。その後、スクロール位置がターゲット要素の位置よりも大きいかどうかを確認するイベントリスナを設定して、背景色を変更します。

<script> 
var events = $("#events"); 
    var eventsHeight = events.height();//get div height 
    var eventsDivOffset = events.offset().top;//get div position 

    var aboutUs = $("#aboutus"); 
    var aboutUsHeight = aboutUs.height();//get div height 
    var aboutUsDivOffset = aboutUs.offset().top;//get div position 
    var members = $("#members"); 
    var membersHeight = members.height(); //get div height 
    var membersDivOffset = members.offset().top; //get div position 
    var currentScrollPos = window.pageYOffset; //get scroll position 
    function yScroll(){ 
     var currentScrollPos = window.pageYOffset; 
     if(currentScrollPos >= aboutUsDivOffset || currentScrollPos <= aboutUsDivOffset + aboutUsHeight){ 
     $(".topnav").css({"background-color":"white"}); 
     } 
     else if(currentScrollPos >= eventsDivOffset || currentScrollPos <= eventsDivOffset + eventsHeight){ 
     $(".topnav").css({"background-color":"red"}); 
     } 
     else if(currentScrollPos >= membersDivOffset || currentScrollPos <= membersDivOffset + membersHeight){ 
     $(".topnav").css({"background-color":"red"}); 
     } 
     else{ 
     $(".topnav").css({"background-color":" "}); 
     } 
    } 
    window.addEventListener("scroll", yScroll); 
    }) 
    </script> 

どのようにして私が望むものを達成することができますか？そのあなた」と仮定すると、

Answer 1

http://imakewebthings.com/waypoints/ あなたは
（とにかくjqueryのを使用してyoureのため）これをachiveするjQueryのウェイポイントを使用することができますそれも、スクロール方向検出および他の多くの便利な機能
を持っている（http://imakewebthings.com/waypoints/guides/getting-started/での例を参照）
それを使用して再、コードは次のようにsomethiingになります。

JSFiddle with working code

var waypoint = new Waypoint({ 
     element: document.getElementById('aboutus'), 
     handler: function(direction) { 
     if(direction=== 'down'){ 
       $(.topnav).addClass(fixed); 
     } 
     else if(direction === 'up'){ 
       $(.topnav).removeClass(fixed); 
     } 

     } 
    }) 

EDIT

OK, i fixed itあなただけのスクリプトの最後に `）ですから、`}不必要に持っている条件は