如何使Javascript中的CSS正常工作

How to get CSS in Javascript working correctly

本文关键字：工作 常工作 何使 Javascript 中的 CSS      更新时间：2023-09-26

我在使用某些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之后再次变为实心。

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

这种效果可以在我的博客上看到，它更容易链接到博客，而不是试图描述。

这是一堆不需要太多工作的代码！只要在卷轴上添加一个类，就会容易得多。

例如

$(window).scroll(function() {    
        var scroll = $(window).scrollTop();
        if (scroll >= 100) {
            $("header").addClass("white");
        } else {
            $("header").removeClass("white");
        }
    });
.white {
background:#fff;
}
.white a {
color:#222;
}

正如@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");
    }
});
相关文章：