Javascript 滚动后更改CSS

我有一个导航栏，它使用一些CSS来更改不透明度：

.navbar{
背景色：#4B5253；
不透明度：0.8；
过滤器：α（不透明度=80）；
}

在用户向下滚动一定数量的像素（例如，

500px

）后，我需要将

opacity

更改为

1.0

我正在使用jQuery，但没有找到解决方案

另外，我不擅长JavaScript，有时我不知道应该把代码放在哪里。因此，如果有任何方法来做这一切与CSS，这将是伟大的

---

-向下滚动时，请密切注意标题。

要完成您要做的事情，最简单的方法是结合一些简单的jQuery和CSS转换

我们将使用JavaScript检查每个滚动事件上的windows滚动位置，并将其与

#main

元素底部的距离进行比较；如果滚动位置更大，那么我们将对主体应用一个类来指示我们已经滚动过

#main

，然后我们将使用CSS来定义该状态的导航样式

更改CSS代码，使其在超过

#main

时更改不透明度

//通过将#main元素的偏移量加上其高度来获取该元素底部的值，将其设置为变量
var mainbottom=$（'#main'）.offset（）.top+$（'#main'）.height（）；
//在卷轴上，
$（窗口）.on（'scroll'，function（）{
//我们来这里是为了减少一点工作量
stop=Math.round（$（window.scrollTop（））；
如果（停止>主底部）{
$（'.nav'）.addClass（'pass-main'）；
}否则{
$（'.nav'）.removeClass（'pass-main'）；
}
});
.nav{
背景色：透明；
颜色：#fff；
过渡：所有0.25秒缓解；
位置：固定；
排名：0；
宽度：100%；
背景色：#ccc；
填充：1em 0；
/*请确保在此处添加供应商前缀*/
}
.nav.past-main{
背景色：#fff；
颜色：#444；
}
#主要{
高度：500px；
背景色：红色；
}
#低于主要{
高度：1000px；
背景色：#eee；
}

#主要
#如果您想要本机解决方案，请使用以下方法：

function changeCss () {
  var bodyElement = document.querySelector("body");
  var navElement = document.querySelector("nav");
  this.scrollY > 500 ? navElement.style.opacity = .8 : navElement.style.opacity = 1;
}
window.addEventListener("scroll", changeCss , false);

这是一个现场演示


函数更改css（）{
var bodyElement=document.querySelector（“body”）；
var navElement=document.querySelector（“nav”）；
this.scrollY>500？navElement.style.opacity=.8:navElement.style.opacity=1；
}
window.addEventListener（“滚动”，changeCss，false）
正文{
背景色：白色；
高度：1000vh
}
导航{
位置：固定；
排名：0；
左：0；
宽度：100%；
文本对齐：居中；
背景：蓝紫罗兰
}
导航li{显示：内联块}
导航a{
填充：10px 12px；
颜色：白色；
文本转换：大写；
文本装饰：无
}






我为类
a
编写了CSS，然后是类
b

在
.a
中，不透明度为0.8，在
.b
中，不透明度为1.0。使用jQuery，我只是更改了元素的类：

.a{
不透明度：0.8；
}
.b{
不透明度：1.0；
}

$（窗口）。滚动（函数（）{
var$heightScrolled=$（窗口）.scrollTop（）；
var$defaultHeight=500；
如果（$heightScrolled<$defaultHeight）{
$（'#mynav'）.removeClass（“b”）
$（'#mynav'）.addClass（“a”）
}
否则{
$（'mynav'）.addClass（“b”）
}
});

$(window).scroll(function () {
    var $heightScrolled = $(window).scrollTop();
    var $defaultHeight = 500;

    if ($heightScrolled < $defaultHeight) {
        $('#mynav').removeClass("b")
        $('#mynav').addClass("a")
    }
    else {
        $('#mynav').addClass("b")
    }

});