向下滚动后导航淡入？答案

【问题标题】：Navigation fade in after scroll down?向下滚动后导航淡入？
【发布时间】：2012-04-17 01:48:07
【问题描述】：

我想得到一个和这个网站完全一样的导航：http://www.interviewmagazine.com/

向下滚动大约 700 像素左右后会出现一个导航栏。它是具有淡入效果的固定导航，当您滚动回顶部时具有淡出效果。

我试图看看他们是如何编写代码的，但我无法弄清楚。

听起来像 mootools 吗？

如果有人可以提供帮助，那就太好了。谢谢！

【问题讨论】：

没有人会把代码交给你。也许试着想想你将如何解决这个问题，如果你遇到困难就回来
我真的不知道从哪里开始。好吧，我的意思是我确定我应该从顶部的固定导航开始，但我不知道接下来我会做什么。
开始在他们的网站上尝试ctrl-u 并查看他们的代码。我认为处理这个问题的是 jQuery 而不是 mootools。看看他们的 home.js interviewmagazine.com/script/home.js

标签： javascript jquery navigation mootools fadein

【解决方案1】：

您可以使用 jQuery 和 CSS 创建这样的菜单，在以下情况下根据需要交换类：

var posit = window.scrollTop();
if (posit == [your designated fadein location]) {
    //do something;
}

CSS: position : fixed, opacity : 0, height : 0; overflow : hidden

交换类以将高度更改为固定数量

animate({opacity : 1.0}, 'fast', function() {
    //callback;
});

您必须为用户滚动设置一个侦听器，但这应该可以帮助您入门。您所需要的只是 jQuery 和一个浏览器，一种将项目分割成可管理部分的合乎逻辑的方法，以及时间。

编辑：这是你的小提琴。

http://jsfiddle.net/lazerblade01/fNn7K/26/

【讨论】：

谢谢，我不知道如何完成代码.. javascript 太可怕了。
对不起，如果我有时间和耐心，我会试一试，但今晚不会发生。如果您无法弄清楚，请告诉我，也许我可以让您从一个文档齐全的模板开始，您可以在其中插入您需要的内容。
如果可以的话，我真的很感激！我似乎真的无法得到它。我可以得到固定的导航，但不能让 javascript 工作。
嘿，你有没有机会为我制作那个模板？

【解决方案2】：

对于任何通过 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');
            }
    }); 
 });

这是一个小提琴演示 http://jsfiddle.net/uFq2k/297/

是这段代码的一点修改版：how can I stick the div after scrolling down a little

【讨论】：

aaah thx - 非常酷。当我希望它在一定数量的像素后启动时，我只需执行以下操作：“var stickyHeaderTop = $('nav').offset().top + 200;”

【解决方案3】：

David Walsh 有一个他称之为 ScrollSpy 的东西 - 很像 twitter 的滚动间谍 - 只是它做了不同的事情。

Twitter 可以对进入视野的特定感兴趣元素做出反应。

walsh 的插件可以在用户滚动到特定阈值并返回时做出反应并为您提供事件。

http://davidwalsh.name/mootools-scrollspy

【讨论】：

【解决方案4】：

你可以试试Twitter's Bootstrap。查看他们的第二个工具栏。

【讨论】：

不知道为什么，但该页面在我的 Mac 上的 Safari 中真的抖动。很奇怪。
真的，这很蹩脚。你用过 Atlassian 的 Jira 吗？滚动时，他们的票务系统上有一个非常流畅的淡入淡出过渡。
没有在 Safari 中使用过，虽然我在 Firefox 中从未遇到过问题。在我现在使用的任何浏览器上，问题的链接都非常流畅。（而且这是一个非常酷的效果，我可能不得不在某些时候使用它。）
是的，我实际上并没有查看链接。只需阅读他的描述。检查出来之后。它很漂亮，虽然不是真正的幻灯片，只是在一定距离后淡入。看起来很有用，但它可能只适用于这样的高大艺术网站。谁知道呢。