javascript 滚动后更改 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28392145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change CSS After Scrolling
提问by HessamMT
I have a nav-bar that I used some css codes for opacity:
我有一个导航栏，我使用了一些 css 代码来设置不透明度：
background-color: #4b5253;
opacity: 0.8;
filter: alpha(opacity=80);
All I need is, after user scrolls down for example 500px, opacity must change to 1.0.
我需要的是，在用户向下滚动例如 500 像素后，不透明度必须更改为 1.0。
I tried some jQuery code but I didn't get answer. Also I'm really weak to work with JavaScript and sometimes I don't know where should I put my code! So if is there anyway to do it all with CSS, it will be great! If not, please note a little more about JavaScript :)
我尝试了一些 jQuery 代码，但没有得到答案。此外，我真的很不擅长使用 JavaScript，有时我不知道应该把代码放在哪里！所以如果无论如何都可以用 CSS 来做这一切，那就太好了！如果没有，请多注意一点 JavaScript :)
For example go to: hulu.com
例如去：hulu.com
回答by Gildas.Tambo
If you are look for a native solution then use this instead
如果您正在寻找本机解决方案，请改用它
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);
here is a live demo
这是一个现场演示
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);body{
background-color: white;
height: 1000vh
}
nav{
position:fixed;
top:0;
left:0;
width:100%;
text-align: center;
background: blueviolet
}
nav li{display: inline-block}
nav a{
padding: 10px 12px;
color: white;
text-transform:uppercase;
text-decoration: none
}<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav> 回答by HessamMT
i found this solution:
我找到了这个解决方案：
i wrote two css code (for example a&b). in "a" opacity was 0.8 and in "b" was 1.0, so with jquery i just changed the css class in my event:
我写了两个 css 代码（例如 a&b）。“a”中的不透明度为 0.8，“b”中的不透明度为 1.0，因此使用 jquery 我只是在我的事件中更改了 css 类：
$(window).scroll(function () {
var $heightScrolled = $(window).scrollTop();
var $defaultHeight = 500;
if ( $heightScrolled < $defaultHeight )
{
$('#mynav').removeClass("b")
$('#mynav').addClass("a")
}
else {
$('#mynav').addClass("b")
}
});
thank u all :)
谢谢大家:)
回答by Crezzur
The easiest way to accomplish what you're trying to do is a combination of some simple javascript (jQuery powered in this case) and CSS3 transitions.
完成您想要做的事情的最简单方法是结合一些简单的 javascript（在这种情况下使用 jQuery）和 CSS3 转换。
We'll use JS to check for the windows scroll position on every scroll event and compare it to the distance of the bottom of the #main element - if the scroll position is greater, then we'll apply a class to the body to indicate we've scrolled past #main, and then we'll use CSS to define the nav styling for that "state."
我们将使用 JS 来检查每个滚动事件上的窗口滚动位置，并将其与 #main 元素底部的距离进行比较 - 如果滚动位置更大，那么我们将应用一个类到正文来指示我们已经滚动过#main，然后我们将使用 CSS 来定义该“状态”的导航样式。
So, our basic markup:
所以，我们的基本标记：
<nav class="nav">
<a href="#" class="logo">[logo]</a>
</nav>
<div id="main">#main</div>
<div id="below-main">#below-main</div>
And our javascript:
还有我们的 javascript：
// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top + $('#main').height();
// on scroll,
$(window).on('scroll',function(){
// we round here to reduce a little workload
stop = Math.round($(window).scrollTop());
if (stop > mainbottom) {
$('.nav').addClass('past-main');
} else {
$('.nav').removeClass('past-main');
}
});
And, our styles:
而且，我们的风格：
.nav {
background-color:transparent;
color:#fff;
transition: all 0.25s ease;
position:fixed;
top:0;
width:100%;
background-color:#ccc;
padding:1em 0;
/* make sure to add vendor prefixes here */
}
.nav.past-main {
background-color:#fff;
color:#444;
}
#main {
height:500px;
background-color:red;
}
#below-main {
height:1000px;
background-color:#eee;
}
A working example on Codepen: http://codepen.io/taylorleejones/pen/KJsvz
Codepen 的一个工作示例：http://codepen.io/taylorleejones/pen/KJsvz
On the Whiteboard site, we also employ some scroll throttling and a bit more complicated styling semantics, but this is the gist of it.
在 Whiteboard 站点上，我们还使用了一些滚动限制和更复杂的样式语义，但这就是它的要点。
Change the css code so it changes opacity when its "past-main.
更改 css 代码，使其在“过去的主要内容”时更改不透明度。
