gpt4 book ai didi

javascript - 滚动时更改标题的颜色

转载 作者:行者123 更新时间:2023-11-28 07:47:43 25 4
gpt4 key购买 nike

我马上切入正题,基本上我希望我的页眉从透明(CSS 中没有背景属性)变为滚动时具有白色的 background-color

我正在使用这个 JavaScript,但没有取得任何进展。

$(window).scroll(function() {
var changeNav = 'rgba(0, 0, 0, 0.36)'
if ($(window).scrollTop() > 200) {
changeNav = '#ffffff';
}
$(.header).css('background-color', changeNav);
});

还有,有什么办法可以让它自行恢复正常吗?所以我在页面的底部,标题的 background-color 是白色的,但是当我滚动到顶部时,JavaScript 将属性取出来了?我一直在玩耍和搜索,但找不到任何东西。

注意:我从 Stack Overflow 的另一个地方获得了这段 JavaScript,here

非常感谢

最佳答案

jsBin demo

$(.header)应该是 $(".header")

您的脚本也可以“简化”为:

$(window).scroll(function() {
var scrolled = $(this).scrollTop() > 200;
$(".header").css('background-color', scrolled ? '#fff' : "rgba(0, 0, 0, 0.36)");
});

请注意,以上将强制 .header每次滚动时背景颜色都会发生变化(甚至从#fff 到#fff)。要利用它并确保即使用户调整窗口大小也有正确的颜色,请使用:

$( function () { // DOM ready to be manipulated

var $header = $(".header"); // Cache elements for intensive actions
$(window).on("scroll resize", function() {
if($(this).scrollTop() > 200){
$header.css('background-color', "#fff" );
}else{
$header.css('background-color', "rgba(0, 0, 0, 0.36)" );
}
});

});

Ofc,你已经在 <head> 中包含了 jQuery 库您的文档:

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

关于javascript - 滚动时更改标题的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30608233/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com