如何让 Javascript 中的 CSS 正常工作

Question

我在使用某些 javascript 时遇到了一些问题。

这个想法是让我的菜单的背景透明，带有白色链接。然后当滚动说 100 时，背景从透明变为纯白色，文本链接从白色变为 #222，文本链接上的悬停状态将它们改回白色。

//Fade in header
jQuery(window).on("scroll", function () {
 if (jQuery(this).scrollTop() > 100) {
    jQuery("body.home header, body.page header").css("background-color","#fff");
        jQuery("body.home header, body.page header").css("box-shadow","0px 2px 4px -2px rgba(0, 0, 0, 0.15)");
        jQuery("body.home header, body.page header").css("transition","1s");
            jQuery(".nav-menu ul li a").css("color","#222");
            jQuery(".nav-menu ul li a:hover").css("color","#fff");
 }

else {
    jQuery("body.home header, body.page header").css("background-color","transparent");
    jQuery("body.home .nav-menu ul li a, body.page .nav-menu ul li a").css("color","#fff");

            jQuery("body.home header, body.page header").css("box-shadow","none");


 }
 });

它没有按预期工作。

首先，在某种形式的滚动事件发生之前，可以看到白色背景。然后变成透明，100后又变成固体。

第二个问题是，在纯白色背景的更改状态下，锚文本在悬停时不会改变颜色。

可以看到效果不适用于my blog，它更容易链接到与尝试描述相反的位置。

Answer 1

这是一个地狱般的大量代码，工作不多！只需在滚动上添加一个类，它会容易得多。

例如

$(window).scroll(function() {    
        var scroll = $(window).scrollTop();
        if (scroll >= 100) {
            $("header").addClass("white");
        } else {
            $("header").removeClass("white");
        }

    });

.white {
background:#fff;
}
.white a {
color:#222;
}

Answer 2

正如@GavinThomas 所说，你真的应该使用 CSS 类来设置“透明”状态，并且只使用 jQuery 来打开/关闭类。

也就是说，假设 white 类将背景设置为白色，并且默认情况下标题是透明的，这就是您的 CSS 的外观。当然，您需要添加所有已有的样式。

header {
  background-color: transparent;
  transition: 1s;
}

.nav-menu ul li a, body.page .nav-menu ul li a {
  color: #fff;
}

header.white {
  background-color: #fff;
  box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.15); 
}

header.white .nav-menu ul li a{
  color: #222;
}

header.white .nav-menu ul li a:hover {
  color: #fff;
}

正如@GavinThomas 所说

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 100) {
        $("header").addClass("white");
    } else {
       $("header").removeClass("white");
    }

});