スクロールの不透明度の変更アイコン

Question

新しいユーザーはここになります。 私は自分のhtmlで書いたjavascriptコマンドに問題があります。 私のページは3つのセクションで設定されています。セクションは、固定ナビゲーションバーに3つのアイコンで表されます。私がしようとしているのは、スクロールするセクションに応じて、他の2つのアイコンの不透明度を下げることです。 if-elseステートメントを実行するためには、最初のセクションで作成しましたが、次のセクションに新しいif-elseステートメントを書き込むと、次の不透明度の変更は認識されません。

マイコード：

$(document).ready(function() { 
    var nav = $(".work1"); 
    var banner = $("#LogoBio"); 
    var pos = nav.position(); 
    var icon1 = $("#Graphics"); 
    var icon2 = $("#Animations"); 
    var icon3 = $("#HandArt"); 
    var section1 = $("#ill4"); 
    var section2 = $("#aniDes"); 

    $(window).scroll(function(){ 
     var windowpos = $(window).scrollTop(); 

     if (windowpos>=banner.outerHeight()){ 
      nav.addClass('fixedTop'); 
     } 
     else { 
      nav.removeClass('fixedTop'); 
      } 

    $(".work1").wrapInner('<div class="nav-inner"</div>'); 


    if (windowpos>=section1.outerHeight()){ 
     icon2.addClass('opacityChange'); 
     icon3.addClass('opacityChange'); 

     } 
    else { 
      icon2.removeClass('opacityChange'); 
      icon3.removeClass('opacityChange'); 
     } 
     }); 
    }); 

次のセクションのためのIf-else文？

誰かが解決策についてアイデアを持っていれば、私はそれを感謝するでしょう。あなたの助けをありがとう！

Answer 1

最初にあなたのアイコンタグにクラス属性を追加します。

< .... ID = "グラフィックス" クラス= 'アイコン' ...>

< .... ID = "アニメーション" = 'アイコン' クラス...>

< .... ID = "HandArt" クラス= 'アイコン' ...>

、その後、コード内で最初にすべての.iconタグにし、後にクラスを追加それを不要なものから削除します：

$(".icon").addClass("opacityChange"); 
if (windowpos>=section3.outerHeight()) { 
    icon3.removeClass("opacityChange"); 
} else if (windowpos>=section2.outerHeight()) { 
    icon2.removeClass("opacityChange"); 
} else if (windowpos>=section1.outerHeight()) { 
    icon1.removeClass("opacityChange"); 
}