12

これは何度か聞かれているかもしれませんが、少し検索しても正確な答えが得られません。

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

これは、これまでの他の回答を見て思いついたものです。これにより、下にスクロールすると特定の高さの後にdivが消えますが、上にスクロールすると同じ高さに達したときにのみ再表示されます. ユーザーが上にスクロールし始めたときに、div がすぐに表示されるようにします。このコードにはアニメーションもありません...

jQuery(window).scroll(function() {

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

3 に答える 3

27

私も最高の JQuery アーティストではありませんが、これでうまくいくと思います。

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

myposユーザーが上下にスクロールするたびに更新されていることがわかります。

編集

リクエストに応じて、フィドルでいくつかの更新を行いました: http://jsfiddle.net/GM46N/2/。.fadeIn()フィドルの js 部分で、2 つのオプションを作成したことがわかり.fadeOut()ます.slideToggle()。

更新されたjsは次のとおりです。

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;
});

また、追加の変数 を追加してup、ユーザーが最初に上にスクロールしたときにのみイベントを発生させ、次にトグルが発生するのは、ユーザーが下にスクロールしたときなどです。それ以外の場合、イベントは何度でも発生します (前のコードを使用してテストすると.slideToggle()、大量のイベント発生を確認できます)。

再編集: も追加.stop()したので、まだ実行中の効果がある場合は、その効果が最初に停止され、ユーザーがすばやく上下にスクロールした場合の遅延を防ぐことができます。

于 2013-07-28T13:35:34.593 に答える