Javascript 基于滚动的页眉收缩大小

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

以下是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");
});

有人能看出我的错误吗？此外，我想解决方案是在它的高度过渡平稳，但我不认为这个解决方案将提供

见此

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

及

#身体

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

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

$（文档）.on（'scroll'，函数（e）{
var值=$（this.scrollTop（）；
如果（值<100）
$（“nav”）.css（“高度”，“100px”）；
其他的
$（“nav”）.css（“高度”，“45px”）；
});

---

更新了小提琴。

我现在知道哪里出错了。。。你对使过渡平滑有什么建议吗？为了什么？所以从100px到45px的变化是一个平稳的过渡，而不是一个快速的转变。

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