滚动后更改 CSS [英] Change CSS After Scrolling

问题描述

我有一个导航栏，它使用一些 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！