下拉页面后导航淡入？

Question

我希望能获得一个与http://www.interviewmagazine.com/ 相同的导航栏。

当页面向下滚动大约700像素时，会出现一个固定的导航栏，具有淡入效果，在向上滚动回到顶部时会有淡出效果。

我试图查看他们的代码，但无法弄清楚。

听起来像是mootools？

如果有人能帮忙，那就太棒了。谢谢！

- teejay.webdesign

---

没有人会轻易地把代码交给你。也许你可以考虑一下如何解决这个问题，如果卡住了再回来。 - simchona

老实说，我不知道从哪里开始。我想我应该从制作顶部的固定导航栏开始，但我不知道接下来该做什么。 - teejay.webdesign

开始尝试在他们的网站上按ctrl-u，并查看他们的代码。我认为处理这个的是jQuery而不是mootools。请查看他们的home.js http://www.interviewmagazine.com/script/home.js - Zac

Answer 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/

- Lazerblade

---

谢谢，我不知道如何完成这段代码，我对JavaScript一窍不通。 - teejay.webdesign

抱歉，如果我有时间和耐心，我会尝试一下，但今晚不行。如果你无法解决问题，请告诉我，也许我可以为你提供一个良好记录的模板，你只需要插入所需内容即可开始。 - Lazerblade

如果您能做到，我真的非常感激！我似乎真的无法理解它。我可以得到固定的导航栏，但无法让JavaScript起作用。 - teejay.webdesign

嘿，你有没有机会为我制作那个模板？ - teejay.webdesign

Answer 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');
            }
    }); 
 });

这里有一个Fiddle DEMOhttp://jsfiddle.net/uFq2k/297/

它是这段代码的稍作修改：如何在滚动一点后将div粘在上面

- SobiechPL

---

啊，谢谢 - 非常酷。当我想让它在一定数量的像素后开始时，我只需执行以下操作： "var stickyHeaderTop = $('nav').offset().top + 200;" - user1688793

Answer 3

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

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

Walsh的插件可以在用户滚动到特定阈值并返回时触发事件。

http://davidwalsh.name/mootools-scrollspy

- Dimitar Christoff

Answer 4

你可以尝试使用Twitter的Bootstrap。看看他们的第二个工具栏。

- Dustin Graham

---

不知道为什么，在我的 Mac 上使用 Safari 浏览器打开那个页面非常卡顿。很奇怪。 - David

真的吗，那太糟糕了。你用过Atlassian的Jira吗？他们的工单系统在滚动时有一个相当流畅的淡入淡出过渡效果。 - Dustin Graham

虽然我没有在Safari中使用过它，但我在Firefox中从未遇到过问题。当前我使用的任何浏览器都可以很好地访问问题中提供的链接。（而且这是一种相当酷炫的效果，也许有一天我会用到它。） - David

是的，我实际上没有查看链接，只是阅读了他的描述。在检查它之后，它很漂亮，不过并不真正是幻灯片效果，只是在一定距离后淡入。看起来很有用，但可能只适用于那种高大的艺术网站。谁知道呢。 - Dustin Graham