滚动时更改菜单的高度

Question

我想要我的网站，当我向下滚动以最小化菜单的高度时。例如，我的标题是固定的顶部，高度为：150px。当我向下滚动时，我想要调整高度：50px。

我正在使用 bootstrap 3。因此我的标题类是.navbar .navbar-fixed-top .

你能告诉我该怎么办？

Answer 1

这是简单的jquery解决方案。

$(window).scroll(function (event) {
        var y = $(this).scrollTop(); //set position from top when to change style in pixels
        if (y >= 300) {
            $('#header').addClass('resized');
        } else {
            $('#header').removeClass('resized');
        }
    });

CSS：

.resized {
    height:50px !important;
}

<强> JSFiddle