視差ナビゲーションメニュー

Question

これはこの質問に基づく質問です：parallax navigation menu title to show。

私はメニューのタイトルを表示することができましたが、とにかく、特定のタイトルセクションに人がいるときにメニューを変更できるようにCSSを変更することができますか？

現在、前の質問の例では、1色（青色）です。私はサークルに透明な効果を持たせることを考えていました。あるいはウェブページの特定のセクションにあることを他の色に変えてみましょう。

ありがとうございます！

Answer 1

jQueryのスクロール機能を使用して、セクションが表示されているときにこれを検出することができます。

var thisScroll = 0, lastScroll = 0; 
$(window).scroll(function(){ 
    //Detect your current scroll position 
    thisScroll = $(window).scrollTop(); 

    //Loop through each article 
    $('#content article').each(function(){ 

    //Get the element's distance from top of the viewport, including scroll 
    var myPos = $(this).offset().top - thisScroll; 

    //Scrolling down 
    if(thisScroll > lastScroll){ 
     if(myPos > 0 && myPos < $(window).height()){ 
     console.log($(this).attr('id')); 
     } 
    } 
    //Scrolling up 
    else{ 
     if(myPos > -$(window).height() && myPos < 0){ 
     console.log($(this).attr('id')); 
     } 
    } 

    }); 

    //If lastScroll is higher than thisScroll, the user must have scrolled up 
    lastScroll = thisScroll; 
}); 

スクロール機能は、要素がビューポート内をスクロールしているかどうかをチェックしています（0と画面の高さの間）。スクロールアップしている場合は、要素の上端からオフセットが計算されるため、比較は反転されます。そのため、ビューポートの高さが0と負の値のいずれかを探しています。それが理にかなっているかどうか私に教えてください！