javascript 向下滚动后导航淡入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10184037/
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
Navigation fade in after scroll down?
提问by teejay.webdesign
I would like to get a navigation exactly like this website : http://www.interviewmagazine.com/
我想要一个完全像这个网站的导航：http: //www.interviewmagazine.com/
A navigation bar appears after scrolling down about 700 pixels or so.. its a fixed nav with fade in effect and has a fade out effect when you scroll back to top.
向下滚动大约 700 像素后会出现一个导航栏。它是一个带有淡入效果的固定导航，当您滚动回顶部时具有淡出效果。
I tried to see how they did their code but i couldnt figure it out.
我试图看看他们是如何编写代码的，但我无法弄清楚。
sounds like mootools tho?
听起来像 mootools？
If someone can help that would be awesome. thanks!
如果有人可以提供帮助，那就太棒了。谢谢！
回答by Lazerblade
You can create such a menu using jQuery and CSS, swapping classes as needed when:
您可以使用 jQuery 和 CSS 创建这样的菜单，在以下情况下根据需要交换类：
var posit = window.scrollTop();
if (posit == [your designated fadein location]) {
//do something;
}
CSS: position : fixed, opacity : 0, height : 0; overflow : hidden
swap class to change height to fixed amount
交换类以将高度更改为固定量
animate({opacity : 1.0}, 'fast', function() {
//callback;
});
You'll have to set a listener for when user scrolls, but this should get you started. All you need is jQuery and a browser, a logical approach to cut the project up into manageable parts, and time.
您必须为用户滚动时设置一个侦听器，但这应该可以帮助您入门。您所需要的只是 jQuery 和浏览器、一种将项目划分为可管理部分的合乎逻辑的方法和时间。
EDIT: Here's your fiddle.
编辑：这是你的小提琴。
回答by SobiechPL
For anyone searching through stackoverflow here is my try:
对于任何通过 stackoverflow 搜索的人来说，这是我的尝试：
$(function(){
// Check the initial Poistion of Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#stickyheader').css({position: 'fixed', top: '0px'});
$('#stickyheader').css('opacity', '1');
} else {
$('#stickyheader').css({position: 'static', top: '600px'});
$('#stickyheader').css('opacity', '0');
}
});
});
Here is a Fiddle DEMOhttp://jsfiddle.net/uFq2k/297/
这是一个小提琴演示http://jsfiddle.net/uFq2k/297/
It is a little modified version of this code: how can I stick the div after scrolling down a little
这是此代码的一个小修改版本：向下滚动一点后如何粘贴 div
回答by Dimitar Christoff
David Walsh has a thing he calls ScrollSpy - much like twitter's scroll spy - only it does a different thing.
David Walsh 有一个他称之为 ScrollSpy 的东西——很像 Twitter 的滚动间谍——只是它做了不同的事情。
the twitter one can react to a particular element of interest coming into view.
推特用户可以对出现的特定感兴趣元素做出反应。
walsh's plugin can react and give you events when a user scrolls to a particular threshold and back.
当用户滚动到特定阈值并返回时，walsh 的插件可以做出反应并为您提供事件。
回答by Dustin Graham
You could try Twitter's Bootstrap. Check out their second toolbar.
你可以试试Twitter 的 Bootstrap。查看他们的第二个工具栏。
