簡體   English   中英

如何使Javascript中的CSS正常工作

[英]How to get CSS in Javascript working correctly

我使用的某些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");
    }

});

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM