Javascript CSS要素を変更する

Question

私はthis tutorialをフォローしていました。ページの上部に達したときにサイトのナビゲーションバーをページの上部に固定しようとしました。彼らが設定した方法で動作させることができませんでしたので、私は別の方法で設定しようとしましたが、それでも動作させることはできません。私が試してみて、この仕事をするために私のbodyタグの終わりにこのコードを置く（ナビゲーションバーには、「ナビゲーションバー」のCSSのIDあり）：

jQueryの

if ($document).scrolltop() > 132){ 
    $("#navbar").css("position", "fixed"); 
    $("#navbar").css("top", "132px"); 
} 
else{ 
    $("navbar").css("position","static"); 
} 

を私は何かあります行方不明？

事前のおかげで、

Bradon

編集：

私は、迅速な応答をみんなに感謝し、私は両方のJavaScriptとstackoverflowのに新しいですと謝罪したいです。私は解決策の一部が提案し、ここで私が今持っているもので実装しようとしています：

<script type="text/javascript"> 
      var navbar = $("#navbar"); 
      navbar.on("scroll", function(e){ 
       if (navbar.scrollTop() <= 0){ 
        navbar.css("position", "fixed"); 
        navbar.css("top", "0px"); 
       } 
       else{ 
        navbar.css("position","static"); 
       } 
      }); 
</script> 

、私はまだそれが正常に動作させることはできません。

編集2：

私は彼らの助けのために皆に感謝したいと思い、私は君たちなしでそれを考え出していませんでした。誰もが今までそれを必要とする必要がある場合はここで私が使用したコードは次のとおりです。

<script type="text/javascript"> 
      var navbar = jQuery("#navbar"); 
      jQuery(document).on("scroll", function(e){ 
       if (jQuery(document).scrollTop() > 280){ 
        navbar.css("position", "fixed"); 
        navbar.css("top", "0px"); 
       } 
       else{ 
        navbar.css("position","static"); 
        navbar.css("top", "auto"); 
       } 
      }); 
</script> 

このスクリプトは、「ナビゲーションバー」のクラスを持っているあなたはトップにこだわったい事を前提としています。私の問題は、wordpressがjqueryで$を受け入れていなかったので、jQueryで置き換えました。皆さんありがとうございました！

Answer 1

私は構文が間違っていると思います。 document.scrollTopに括弧がありませんまた、＃がnavbarにありません。

<script type="text/javascript"> 
      if ($(document).scrollTop() > 132){ 
       $("#navbar").css("position", "fixed"); 
       $("#navbar").css("top", "132px"); 
      } 
      else{ 
       $("#navbar").css("position","static"); 
      } 
</script> 

Answer 2

ページが読み込まれている間にスクロールトップチェックが1回しか行われないという大きな問題があります。

wrap = $('#wrap'); 

wrap.on("scroll", function(e) { 

    if (this.scrollTop > 147) { 
    wrap.addClass("fix-search"); 
    } else { 
    wrap.removeClass("fix-search"); 
    } 

}); 

「wrap.onは（ 『スクロール』）」の部分は非常に重要であり、これは「scrollTopスプライトの原因になりますので：オリジナルのチュートリアルでは、scrollTopスプライトをチェックするコードは、スクロールイベントが発生するたびに実行するように設定されていますdivがスクロールされるたびに値のチェックが開始されます。