Html 在向下滚动时淡化引导导航栏，同时更改文本颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23976498/
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
Fading bootstrap navbar on scrolldown, while changing text color
提问by delos
so I'm working on a Ruby on Rails app with a design given to me which calls for the navigation bar to be transparent at the top of the page, and then fade into solid white after scrolling down past a certian <section>on the page, at the same time, the navbar link text is white at the top, and will fade to grey at the same <section>.
所以我正在开发一个 Ruby on Rails 应用程序，它的设计要求导航栏在页面顶部是透明的，然后在向下滚动<section>页面上的某个特定人员后淡入纯白色，在同时，导航栏链接文本在顶部为白色，同时会淡化为灰色<section>。
I've looked into JavaScript that changes opacity on scrolldown, but I haven't had success getting it to work. I'd imagine that the same function(s) to fade in the navbar to white, would also work with the navbar links fading to grey as well.
我研究了在向下滚动时改变不透明度的 JavaScript，但我没有成功让它工作。我想将导航栏淡化为白色的相同功能也适用于导航栏链接淡化为灰色的情况。
I've also looked into the .affix js [plugin on Bootstrap, but I don't know very advanced javascript to modify it to my needs. In case it's helpful, the navbar's structure in my the app's view starts as:
我还研究了 .affix js [Bootstrap 上的插件，但我不知道非常先进的 javascript 来修改它以满足我的需要。如果有帮助，我的应用程序视图中的导航栏结构开始为：
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<%= image_tag "logo-small.png" %>
</a>
... "render partial" lines depending on if the user is logged in or not ...
Any and all help is appreciated! I'd really love to get this design working, and I've done most of it already, this particular part has me stumped. Any help is appreciated!
任何和所有的帮助表示赞赏！我真的很想让这个设计工作，而且我已经完成了大部分工作，这个特殊的部分让我很难过。任何帮助表示赞赏！
回答by David Corbin
Something like this might help:
像这样的事情可能会有所帮助：
window.addEventListener("scroll", function() {
if (window.scrollY > 500) {
$('.navbar').fadeOut();
}
else {
$('.navbar').fadeIn();
}
},false);
Change 500 with however many pixels from the top the place is that you want to do the fadeOut at.
将 500 更改为您想要执行淡出的位置的顶部有多少像素。
回答by kmo
Simpler solution is to create a CSS class which you then add/remove on the scroll:
更简单的解决方案是创建一个 CSS 类，然后在滚动条上添加/删除它：
.navbar-fixed-top { background-color: rgba(255,255,255,1);transition: background-color 2s ease 0s;}
.navbar-fixed-top.opaque { background-color: rgba(255,255,255,0);transition: background-color 2s ease 0s;
}
}
Javascript:
Javascript：
$(window).scroll(function() {
if($(this).scrollTop() > 300) {
$('.navbar-fixed-top').addClass('opaque');
} else {
$('.navbar-fixed-top').removeClass('opaque');
}
});
Our website has a similar effect: www.kmo.com.au
我们的网站也有类似的效果：www.kmo.com.au
回答by plushyObject
This is great. For newbies, for the opaque class, I did the following:
这很棒。对于新手，对于不透明类，我执行了以下操作：
.navbar-default {
min-height: 120px;
opacity: 0;
transition: opacity .5s;
}
.opaque {
opacity: 1;
transition: opacity .5s;
}Change the fade time under the transition attribute. This doesn't work for all browsers but it looks great for now.
更改过渡属性下的淡入淡出时间。这不适用于所有浏览器，但现在看起来很棒。
