Question

这里有新用户。我有一个javascript命令的问题，我已经用我的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

首先将class属性添加到图标标记：

＆lt; .... id =＆＃34; Graphics＆＃34;类=＆＃39;图标＆＃39; ...＆GT;

＆lt; .... id =＆＃34;动画＆＃34;类=＆＃39;图标＆＃39; ...＆GT;

＆lt; .... id =＆＃34; HandArt＆＃34;类=＆＃39;图标＆＃39; ...＆GT;

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

不透明度更改滚动图标

1 个答案: