jquery - 更改滚动时菜单的高度

Question

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

我使用的是bootstrap 3。所以我的 header 的类是.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