向下滚动后，顶部图像折叠到导航栏中

Question

所以我正在学习bootstrap，我遇到的一个非常简洁的效果是在spook-studio [1]的网站上，当你滚过顶部导航栏标志时，大徽标就会折叠成一个小版本，随之而来的还有导航栏。

我知道如何制作导航栏，然后在向下滚动时让导航栏的每个部分对应于页面，但是如何在滚动后显示导航栏？

非常感谢您提供任何问题或指示的链接，了解更多信息！

[1] http://www.spookstudio.com/

Answer 1

jsFiddle：http://jsfiddle.net/8My5v/ （次要更新）

要实现这一点，您可以使用jquery的 scroll() 和 scrollTop() 方法。

现在你可以这样做了：

  滚动窗口

，

     

检测窗口滚动量（即如果其为0或更大）。

     

如果向下滚动窗口 - ＆gt;节目菜单

     

如果窗口滚动到顶部 - ＆gt;隐藏菜单

演示代码：

$(window).scroll(function () {
    if ($(window).scrollTop() == 0) {
        $('.menu').fadeOut(200);
        $('.welcome').animate({
            height: "300px"
        }, 300);
        shown = false;
    } else if ($(window).scrollTop() > 0 && !shown) {
        $('.menu').fadeIn(200);
        $('.welcome').animate({
            height: "150px"
        }, 300);
        shown = true;
    }
});