Jqueryのnavbarアニメーションが正しく機能しない

Question

私はこのウェブサイトを見て、同様の質問をしましたが、何も見つかりませんでした。

私はbootstrap3を使ってウェブサイトを少し作っています。ほとんどの書式設定/デザインパートが完了していますが、自分では解決できない問題が1つあります。 ユーザーが特定のポイントまでスクロールダウンするときにNavbarを縮小して背景色を変更するためにJqueryを追加しました（覗いてくれたことで助けてくれました） 動きの種類は本当に奇妙です。 ページを読み込むとき、navbarはすでに縮小されていて、背景は色付きですが、少しスクロールするとサイズが爆発し、背景が消えます.Jqueryを動作させるためにスクロールすると、navbarは縮小しますバックとバックグラウンドの色が再び変化します。 書面で説明するのは難しいので、ウェブサイトを見て、私が何を言っているのか見てください。 以下は私が取り組んでいるウェブサイトです。

テストウェブサイト

私は最初に隠されていない（短いナビゲーションバーの高さと背景色）ロードされたとき、そのjQueryの動作していないと仮定していますので、CSSが隠されることになった設定。以下は

jqueryのコードです：事前に助けを

$(document).ready(function(){ 
$(window).scroll(function() { 
    if ($(window).scrollTop() > 70) { 
     $("#top-bar").addClass('animated-header'); 
    } else { 
     $("#top-bar").removeClass('animated-header');  } 
}); 

$("#clients-logo").owlCarousel({ 

    itemsCustom : false, 
    pagination : false, 
    items : 5, 
    autoplay: true, 
    }) 

}); 

ありがとう！

Answer 1

ニースのウェブサイト！

ヘッダー要素を見てみると、すでに問題が発生しているanimated-headerクラスがあることがわかります。ここにあなたのコードです：

<header id="top-bar" class="navbar-fixed-top animated-header"> 

何あなたは、単にそのクラスを削除されて行うことができますし、あなたのスクリプトが上記scrollTop値に、このクラスのベースを追加/削除するに対処するのに役立ちます。このようなものが役に立ちます：

<header id="top-bar" class="navbar-fixed-top"> <!-- without animated-header --> 

Answer 2

私たちはスクロール位置をゼロに戻しているので、これはうまくいきます。これを追加します。

$(document).ready(function() { 
    $('html,body').animate({ 
    scrollTop : 0 
    },10); 
}); 
$(document).ready(function() { 
$(window).scroll(function(){ 
     if($(window).scrollTop() >= 70){ 
      $("#top-bar").addClass("animated-header"); 
     } 
     if($(window).scrollTop() <= 70){ 
     $("#top-bar").removeClass("animated-header"); 
     } 
    }); 
});