twitter-bootstrap 滚动时透明导航栏可见
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24923210/
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
Transparent navbar to visible when scrolling
提问by working ant
I saw an transparent theme navbar that have really nice effect when scrolling down.
我看到一个透明的主题导航栏，向下滚动时效果非常好。
Here is what happends when scrolling down.
这是向下滚动时发生的情况。
- It goes from 0 opacity to 100
- Navbar fixed containers height becomes less.
- Color:#fff; becomes color:000;
- 它从 0 不透明度变为 100
- 导航栏固定容器高度变小。
- 颜色：#fff; 变成颜色：000；
Here is direct link to demo page of that theme
Guessing it is javascript/jquery that is used there and i know only HTML & CSS. Could anyone help me make it similar like in that theme?
猜测它是在那里使用的 javascript/jquery，我只知道 HTML 和 CSS。谁能帮我让它像那个主题一样？
回答by NullPointer
Ok, I'm gonna throw you a bone here JSFiddle:
好的，我要在这里向您扔骨头JSFiddle：
$(document).on('scroll', function (e) {
$('.navbar').css('opacity', ($(document).scrollTop() / 500));
});
Magic number alert: 500 is the divider for the scrollTop, the lower the number the faster the opacity goes above 1 (opacity should be between 0 and 1.
幻数警报：500 是 scrollTop 的分隔符，数字越小，不透明度超过 1 的速度越快（不透明度应该在 0 和 1 之间。
So what this code does is listen to scrolling on the document and set the opacity of the navbar according to the scroll position.
所以这段代码所做的就是监听文档的滚动并根据滚动位置设置导航栏的不透明度。
Hope this helps!
希望这可以帮助！
