0

ここのフォーラムは初めてで、誰かが私を助けてくれることを願っています。

ユーザーが特定のポイントを過ぎてスクロールすると、それに適用されるクラスで固定ヘッダーをフェードインしようとすると、少し問題が発生します。

これが私が以下で使用しているコードです:

$(window).scroll(function(){
    if($(".header-container").offset().top>385){
       $(".header-container").fadeIn(200).addClass("sticky");
    }
    else{
       $(".header-container").fadeOut(200).removeClass("sticky");
   }
});

ここで作業しようとしているページを表示できます。

http://v2.blue-square.com.au

ページが読み込まれると、上部にロゴとナビゲーションが表示されます。スクロールを開始した瞬間に消えます。そうなってほしくない。その .header-container をそのままにして、見えるようにしたい。ページのスクロール ポイントに到達すると、クラス「スティッキー」(基本的にスティッキーには背景画像が含まれ、ロゴが変更され、ナビゲーション リンクの色が変更されます) が .header-container div に追加され、フェード インします。ユーザーがスクロールして戻ってきたら、'sticky' クラスを削除して、サイトが初めて読み込まれたときと同じようにナビゲーションを表示するようにします。ヘッダーはまったく非表示にしないでください。

これに関するヘルプは非常に高く評価されます。みんなありがとう。

4

1 に答える 1

0

あなたのコードでは、そのelse部分に問題があります。

else
{
    $(".header-container").fadeOut(200).removeClass("sticky");
}

element fadeOut ( .header-container) を透明にフェードして非表示にし、attribute stylewithdisplay:noneプロパティを追加します。

この問題を解決するには、次を試してください。 

else
{
    $(".header-container").removeClass("sticky");
}

http://api.jquery.com/fadeOut/のサイトを参照してくださいfadeOut

于 2013-02-12T05:23:36.147 に答える