javascript - 我将如何制作我的 Bootstrap 导航栏 "collapse"？

Question

我试图从这里复制滚动效果:http://www.altisliferpg.com/

我有一种感觉，他们正在使用经过大量修改的 Bootstrap Navbar 版本，这是我从这里获取的:http://www.enjin.com/forums/page/1/m/10826/viewthread/8514993-boot-strap-30-navbar-full-module并对其进行了更改以适合我的具体情况。

当您向下滚动页面时，我该如何做到这一点，顶部的栏会“变小”并在您滚动时与页面一起滚动？谢谢

Answer 1

您可以使用 css transitions 来改变高度、字体大小和其他任何您想要改变的东西。然后简单地设置一个滚动监听器，它向标题添加一个类，以便大小发生变化。快速(而且非常丑陋)的例子。 jsFiddle

$(window).scroll(function () {
    if ($(this).scrollTop()) {
        $('#header').addClass('small');
    }
    else {
        $('#header').removeClass('small');
    }
});