javascript - 不透明度更改卷轴上的图标

Question

这里是新用户。我在 html 中编写的 javascript 命令遇到问题。所以我的页面分为 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

首先将 class 属性添加到您的图标标签中:

<.... id="Graphics"class='icon' ...>

<.... id="Animations"class='icon' ...>

<.... id="HandArt"class='icon' ...>

然后，在代码中首先将类添加到所有 .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");
}