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() {

});