불투명도 변경 스크롤 아이콘

Question

여기에 새 사용자가 있습니다. 내 HTML로 작성한 자바 스크립트 명령에 문제가 있습니다. 내 페이지가 3 섹션으로 설정되었습니다. 섹션은 고정 된 탐색 표시 줄에 3 개의 아이콘으로 표시됩니다. 내가 뭘 하려는지 스크롤하는 부분에 따라 다른 두 개의 아이콘 불투명도 감소가 있습니다. 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"); 
}