スクロールするときにdivを非表示にしてスクロールアップするときに表示するにはどうすればいいですか？

Question

私と一緒にいらしてください、これは数回質問されたかもしれませんが、ちょっと探してから正確な答えを得ることはできません。

基本的には、ユーザーがスクロールダウンを開始すると、ある高さの後にdivが消えてしまい、ユーザーがスクロールアップを開始するまで消えてしまいます。ユーザーがスクロールアップを開始すると、divが再び表示されます。私はこれにもある種のフェード効果が必要です。

これまで私は他の回答を見てきました。これにより、divは下にスクロールすると特定の高さの後に消えますが、上にスクロールしたときに同じ高さに達すると再び表示されます。ユーザーがスクロールアップを開始したときにdivがすぐに表示されるようにしたい。

var mywindow = $(window); 
var mypos = mywindow.scrollTop(); 
mywindow.scroll(function() { 
    if(mywindow.scrollTop() > mypos) 
    { 
     $('.myDIV').fadeOut(); 
    } 
    else 
    { 
     $('.myDIV').fadeIn(); 
    } 
    mypos = mywindow.scrollTop(); 
}); 

は、あなたが更新されmyposを見ることができます：このコードは、私はどちらかの最大のjQueryの-アーティストではないんだけど、私は、これは動作するはずだと思う...

jQuery(window).scroll(function() { 

    if (jQuery(this).scrollTop()>0) 
    { 
     jQuery('.myDIV').fadeOut(); 
    } 
    else 
    { 
     jQuery('.myDIV').fadeIn(); 
    } 
}); 

Answer 1

headroom.jsを試してみてください。このトリックを行うには、少し小さなjavascriptのプラグインです。

Answer 2

を任意のアニメーションのどちらかを持っていませんユーザーがスクロールするたびに、上下に移動します。 http://jsfiddle.net/GM46N/2/：

編集

私はバイオリンで、あなたの要求に応じて、いくつかのアップデートを行いました。私が2つのオプションを作ったことを、あなたはフィドルのjs-部分で見ることができます.1つは.fadeIn()と.fadeOut()です（私が提供したコードがあなたのサイトで動作しています）、もう1つは.slideToggle()です。

はここで更新JS：私もトグルがトリガーされますユーザーがスクロールアップは初めてと次回ときである場合にのみイベントを発生し、余分な変数、upを追加しました

var mywindow = $(window); 
var mypos = mywindow.scrollTop(); 
var up = false; 
var newscroll; 
mywindow.scroll(function() { 
    newscroll = mywindow.scrollTop(); 
    if (newscroll > mypos && !up) { 
     $('.header').stop().slideToggle(); 
     up = !up; 
     console.log(up); 
    } else if(newscroll < mypos && up) { 
     $('.header').stop().slideToggle(); 
     up = !up; 
    } 
    mypos = newscroll; 
}); 

彼は下にスクロールします。さもなければ、イベントは何度も発生します（大量のイベント発生を確認するには、前のコードを .slideToggle()でテストすることができます）。

再編集：私もまだある場合ので、今その旨を実行している効果は、ユーザーが迅速&上下にスクロールする場合の遅れを防ぐために、最初に停止します、.stop()を追加しました。

Answer 3

あなたのコードを使用しましたが、ちょうど.slideToggle()を.fadeInと.fadeOutに置き換えました。