特定のセクションが画面にあるときのtoggleClass

Question

大きなスクロールページを作成しています。私のnavは固定されています。ページ上の特定のセクションに到達したときに、ナビゲーション上の色を（黒から白、またはその逆）変更したいと思います。それらのうちのいくつかは白で、一部は暗いですから - コントラストを作りたいです。私はすでにCSSでクラスを作りましたが、それはトグルされるべきです。しかし、私は自分のコードを使用するのが難しいです。それを見てみましょう：

https://jsfiddle.net/Lp27vuu4/

$(window).scroll(function (event) { 
 
    var scroll = $(window).scrollTop(); 
 
     $('nav').toggleClass('light-mode', 
 
      //add 'light-mode' class when div position match or exceeds else remove the 'light-mode' class. 
 
      scroll >= $('.section2').offset().top 
 
     ); 
 
    }); 
 

 
    //trigger the scroll 
 
    $(window).scroll();//ensure if you're in current position when page is refreshed

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
nav { 
 
    width: 100%; 
 
    position: fixed; 
 
    text-align: center; 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
} 
 

 
.light-mode { 
 
    color: #fff; 
 
} 
 

 
.section1 { 
 
    width: 100%; 
 
    height: 400px; 
 
    background-color: #fff; 
 
    color: #000; 
 
    padding: 100px; 
 
} 
 

 
.section2 { 
 
    width: 100%; 
 
    height: 400px; 
 
    background-color: #000; 
 
    color: #fff; 
 
    padding: 100px; 
 
} 
 

 
.section3 { 
 
    width: 100%; 
 
    height: 400px; 
 
    background-color: #fff; 
 
    color: #000; 
 
    padding: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <h3>navigation links</h3> 
 
</nav> 
 
<section class="section1"> 
 
    section 1 
 
</section> 
 
<section class="section2"> 
 
    section 2 
 
</section> 
 
<section class="section3"> 
 
    section 3 
 
</section>

結論を：デフォルトで

マイナビが暗色です。暗い部分に到達すると、jQueryに.light-modeを<nav>に追加するように伝えたいと思います。しかし、ユーザーがセクションを離れたとき、私はそれを通常の状態に戻したい（クラスを削除する）。私の解決策では、問題があります：

1. セクションにユーザーがいない場合は、元に戻っていないようです。
2. ユーザーが上から下にスクロールしたときにクラスが追加されます。それは.offset().topにあります。私はそれをより専門的かつ普遍的なものにしたい。それぞれのセクションが画面上にあるときにこのクラスを追加したいのです。

Answer 1

を提出あなたのjQueryのでは、以下のこのような何かをすることはscroll +あなたのH3のオフセットは、セクションのオフセットとscroll +あれば、それを削除するよりも大きい場合、クラスを追加することですあなたのh3のオフセットはセクションのオフセット+それの高さよりも大きいです。

このチェックアウト：https://jsfiddle.net/Lp27vuu4/4/

Answer 2

ウェイポイントは、スクロールでイベントをトリガーするポピュラーなプラグインです。

http://imakewebthings.com/waypoints/

置き、それにウェイポイントのJSのプロジェクト内のファイルとリンク。そして、あなたが何をしたいのか

 function toggleClassFunction() { 
      $('nav').toggleClass('light-mode'); 
     } 


     var waypoint = new Waypoint({ 
     element: document.getElementById('id-of-element-when-scrolled-to-event-triggers'), 
     handler: function(direction) { 
      if (direction === 'down') { 
       toggleClassFunction(); // the function that runs 
       this.destroy() //runs the function once 
      } 
      else { 

      } 
     }, 
     offset: 250 //since the event triggers once the element reaches the top of the page, we 
        //sometimes need an offset. so in this example, when the element is 250px from 
        //the top of the page, the even triggers 
     });