Javascript 使导航栏在滚动开始时收缩

我正在设计一个网站，我想有一个导航栏，坚持在页面的顶部，但越来越小，每当用户向下滚动。这方面的一个很好的例子是。如果可能的话，我只想用CSS来实现这一点，但如果必要的话，我愿意使用JavaScript。在做了一些研究并查看了Endgame的源代码之后，我想不出如何做到这一点

---

这是如何实现的？

使用CSS转换和一点jQuery（4行）：

$（文档）。滚动（函数（）{
如果（$（this）.scrollTop（）>10）{//调整150
$（“#head”）.addClass（“收缩”）；
}否则{
$（“#head”）.removeClass（'shrinked'）；
}
});
正文{
高度：9999px；
保证金：0；
背景：url(http://webdesignledger.com/wp-content/uploads/2009/09/pattern_places_8.jpg)重复；/*增加的是阴沉感=阴沉感*/
}
#头{
背景色：红色；
高度：100px；
宽度：100%；
位置：固定；
排名：0；
}
#头，#头*{转换：所有0.3s容易；}
#头缩了{
高度：30px；
}
#头缩跨{
颜色：蓝色；
}

我的头球
Headloom.js很酷，但其工作原理与endgame的固定导航稍有不同。“净空”在向下滚动时隐藏导航，在向上滚动时再次显示导航

如果您想尝试一下，这里有一些代码可以初始化净空，并使用自定义滚动事件为徽标的大小版本切换
隐藏的
类

// Show and hide menu on scroll
$('#primary-nav-container').headroom({
    // Pixels from top
    'offset': 200,
    // Scrolling tolerance
    'tolerance': 5,
    'classes': {
        /*'initial': 'animated',*/
        'pinned': 'slideDown',
        'unpinned': 'slideUp'
    },
    // Callback when nav pinned
    onPin : function() {

        $('#primary-nav-container').fadeIn();
    },
    // Callback when nav unpinned
    onUnpin : function() {

        $('#primary-nav-container').fadeOut();
    },
    // Callback when above offset
    onTop : function() {

        // Show large logo
        $('.large').removeClass('hidden');
        $('.small').addClass('hidden');
    },
    // Callback when below offset
    onNotTop : function() {

        // Show small logo
        $('.large').addClass('hidden');
        $('.small').removeClass('hidden');
    }
});

谢谢这似乎正是我想要的。我还要感谢您让我注意到代码片段特性。我以前从未见过这种情况。一定是StackExchange最近添加的新内容。谢谢分享。目前，我对它没有什么好的用途，但也许我将来会有一些用途。