问题描述
我有一个导航栏,它使用一些 CSS 来更改不透明度:
.navbar {背景色:#4B5253;不透明度:0.8;过滤器:阿尔法(不透明度= 80);}
我需要在用户向下滚动一定数量的像素(例如 500px
)后将 opacity
更改为 1.0
.>
我正在使用 jQuery,但我没有找到解决方案.
另外,我不擅长 JavaScript,有时我不知道应该把代码放在哪里.所以如果有什么办法可以用 CSS 来做这一切,那就太好了!
这是我想要的示例—向下滚动时请密切注意标题.
我为 a
类编写了 CSS,然后是 b
类.
在 .a
中,不透明度为 0.8,而在 .b
中,不透明度为 1.0.使用 jQuery,我只是更改了元素的类:
.a {不透明度:0.8;}.b {不透明度:1.0;}
$(window).scroll(function () {var $heightScrolled = $(window).scrollTop();var $defaultHeight = 500;如果 ($heightScrolled < $defaultHeight) {$('#mynav').removeClass("b")$('#mynav').addClass("a")}别的 {$('#mynav').addClass("b")}});
I have a navbar that uses some CSS to change the opacity:
.navbar {
background-color: #4B5253;
opacity: 0.8;
filter: alpha(opacity = 80);
}
I need the opacity
to change to 1.0
after the user scrolls down a certain number of pixels, for example, 500px
.
I'm using jQuery, but I didn't find a solution.
Also, I'm not good with JavaScript, and sometimes I don't know where should I put my code. So if is there any way to do it all with CSS, it will be great!
Here is an example of what I want—pay close attention to the header as you scroll down.
I wrote CSS for class a
, then class b
.
In .a
, opacity was 0.8 and in .b
the opacity was 1.0. With jQuery, I just changed the element's class:
.a {
opacity: 0.8;
}
.b {
opacity: 1.0;
}
$(window).scroll(function () {
var $heightScrolled = $(window).scrollTop();
var $defaultHeight = 500;
if ($heightScrolled < $defaultHeight) {
$('#mynav').removeClass("b")
$('#mynav').addClass("a")
}
else {
$('#mynav').addClass("b")
}
});
这篇关于滚动后更改 CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!