javascript - 基于滚动的标题缩小大小

Question

使用固定标题，我试图根据滚动位置更改容器的高度（一旦滚动一定距离，菜单就会变小）。

这是CSS：

section#homeBg{
    min-height:1000px;
    padding-top:200px;
}

nav{
    height:100px;
    width:100%;
    background-color:#323D44;
    margin:0;
    position:fixed;
    top:0;
    left:0;
}

这是我希望为我调整大小的 JS，但它似乎不起作用：

$("#body").scroll( function() {
    var value = $(this).scrollTop();
    if ( value > 100 )
        $("nav").css("height", "100px");
    else
        $("nav").css("height", "45px");
});

有人能看出我的错误吗？此外，我希望解决方案在高度过渡方面保持平稳，但我认为该解决方案不会提供...

JSFiddle

Answer 1

#body在您的小提琴中不存在，请尝试：

$(document).on('scroll', function(e) {
    var value = $(this).scrollTop();
    if ( value < 100 )
        $("nav").css("height", "100px");
    else
        $("nav").css("height", "45px");
});

在这里更新了小提琴。

Answer 2

看这个演示

$(function(){
    // your code
});

和

$(document).scroll( function() {

});