スクロール時のslideDownと非アクティブ時のslideUp

私は、ヘッダーとメニューを含む固定メニューを持っています。スクロールダウンすると、メニューが消えてからスクロールが止まると再び表示されます。スクロール時のslideDownと非アクティブ時のslideUp

背景の位置yをアニメーション化している背景イメージもあります。私が抱えている問題は、メニューが消えて再び表示されることですが、背景画像は-70pxにアニメーションされますが、メニューが表示されたときに0pxにアニメーション化されません。

私はJSFiddleを作成しました。

HTML

<body> 
    <div id="header-wrapper"> 

    <div id="branding-wrapper"> 

    </div> 
    <a href="#!"> 
     <div id="inone-wrapper"></div> 
    </a> 
    <div id="navbar-wrapper"> 

    </div> 
    </div> 
</body>

jQueryのあなたの問題がいっぱいのアニメーションキューから来ている

$(document).ready(function($) { 
    var $menu = $("#navbar-wrapper"); 
    var opacity = $menu.css("opacity"); 
    var scrollStopped; 

var fadeInCallback = function() { 
     if (typeof scrollStopped != 'undefined') { 
     clearInterval(scrollStopped); 
     } 
     scrollStopped = setTimeout(function() { 
     $menu.slideDown({ 
      duration: 300, 
      easing: 'linear' 
     }); 
     $('#inone-wrapper').animate({ 
      'background-position-y': '0' 
     }); 
     $('#branding-wrapper').css('background', 'rgba(255,255,255,1)'); 
     }, 800); 
    } 

    $(window).scroll(function() { 
     if (!$menu.is(":animated") && opacity == 1 && $(window).scrollTop() > 130 && $('#navbar').not('.in') && ($(window).width() >= 992)) { 
     $menu.slideUp({ 
      duration: 300, 
      easing: 'linear', 
      complete: fadeInCallback 
     }); 
     setTimeout(function() { 
      $('#inone-wrapper').animate({ 
      'background-position-y': '-70px' 
      }); 
     }, 200); 
     $('#branding-wrapper').css('background', 'rgba(255,255,255,0.9)'); 
     } else { 
     fadeInCallback.call(this); 
     } 
    }); 
});

出典

2016-07-08 nsilva

@DaniP - - 私はJSFIDDLEを更新しましたし、それが今働いて、プレースホルダイメージがある.stop()のデフォルトはフィドルfalse, false

.stop([clearQueue ] [, jumpToEnd ]) https://api.jquery.com/stop/

ですどのようにバックグラウンドサイズを-72pxにアニメーション化するかは、メニューが再び表示されたとき0pxに戻さない – nsilva

それは、ちょうどt akes a while ...あなたのタイミングを変更する必要があります – Adjit

少なくとも私のために戻ってくることはありませんが、少なくともChromeではない@Adjit – nsilva

- ：ここで

サイトから取り除かコードです。だから、jQueryがそれに追いつくのに時間がかかります。あり、

$('#inone-wrapper').stop(true, true).animate({ });

あなたが.scroll()イベントを使用しているので：それは繰り返し-70pxに背景位置をアニメーション化し続けるので、あなたには以下が含まれている場合、あなたは大丈夫でなければなりません - あなたは#inone-wrapperは物事がアップ開催されている場所ですね多くのスクロールイベントが発生するため、関数は非常に迅速に呼び出されています。アニメーションを開始する前に、アニメーションキューをクリアするだけでなく、jQueryの.stop()関数を使用して以前のアニメーションを完了し、true, trueを渡す必要があります。 https://jsfiddle.net/pwLquf3h/7/

$(document).ready(function($) { 
    var $menu = $("#navbar-wrapper"); 
    var opacity = $menu.css("opacity"); 
    var scrollStopped; 

var fadeInCallback = function() { 
     if (typeof scrollStopped != 'undefined') { 
     clearInterval(scrollStopped); 
     } 
     scrollStopped = setTimeout(function() { 
     $menu.slideDown({ 
      duration: 300, 
      easing: 'linear' 
     }); 
     $('#inone-wrapper').animate({ 
      'background-position-y': '0' 
     }); 
     $('#branding-wrapper').css('background', 'rgba(255,255,255,1)'); 
     }, 800); 
    } 

    $(window).scroll(function() { 
     if (!$menu.is(":animated") && opacity == 1 && $(window).scrollTop() > 130) { 
     $menu.slideUp({ 
      duration: 300, 
      easing: 'linear', 
      complete: fadeInCallback 
     }); 
     setTimeout(function() { 
      $('#inone-wrapper').stop(true, true).animate({ 
      'background-position-y': '-70px' 
      }); 
     }, 200); 
     $('#branding-wrapper').css('background', 'rgba(255,255,255,0.9)'); 
     } else { 
     fadeInCallback.call(this); 
     } 
    }); 
});

出典

2016-07-08 15:11:17 Adjit

素晴らしい説明と完璧に動作します、ありがとう！ – nsilva

は、上から一定の距離内にあるとメニューがずれるのを防ぐ方法ですが、 '$（window）.scrollTop（）> 130'でこれをやろうとしましたが、これはやっていないようですあなたが上に到達する前にメニューが下に滑らない、または上にスクロールすると、navbarは正常な状態に戻ります） – nsilva

@nsilvaが動作していれば、それを増やしてください「500」と言うと、違いが見えます。 – Adjit

スクロール時のslideDownと非アクティブ時のslideUp

答えて

関連する問題