jquery - ページのスクロール量に応じて CSS を変更する

Question

私は自分でこれをやろうとしましたが、どこにも行きませんでした。私が持っているのは次のとおりです。

if($("body").scrollTop() > 100) {
    $("header").css("display", "none");
}

それは準備ができている文書の中にあります。私がやりたいheaderのは、ページが100pxスクロールしたときに要素に「display:none」を追加することです。

jQueryをゆっくり勉強中。ありがとうございました。

編集：HTMLは単純です

<div id="wrap">
  <header>...</header>
  ...
</div>

#wrapスクロールが必要なほどの高さです。スクロールが100pxを超えたら非表示にしたいheader。

Answer 1

scrollウィンドウのイベントにフックする必要があり、そこでそのオブジェクトのscrollTop()値を確認します。

var $window = $(window),
    $header = $('header');

$window.scroll(function() {
    if ($window.scrollTop() > 100)
        $header.hide();
    else 
        $header.show();
});

Answer 2

$("header") $("#header") である必要があります。ヘッダーはヘッダー div の ID です