1

ウィンドウのスクロールと一緒にスクロールし、フッターに到達すると停止するアニメーションサイドバーを使用しています。

jQuery(document).ready(function() {

var jQuerysidebar = jQuery("#sb"),
    jQuerywindow = jQuery(window),
    offset = jQuerysidebar.offset(),
    sbh = jQuerysidebar.height(),
    footer = jQuery("#footer").offset().top;


 jQuerywindow.scroll(function() {
    if ( jQuerywindow.scrollTop() > offset.top  ) {
        if (jQuerywindow.scrollTop() + jQuerysidebar.height() < footer) {
            jQuerysidebar.stop().animate({
                marginTop: jQuerywindow.scrollTop() - 8
            });

        }
    } else{
         jQuerysidebar.stop().animate({
            marginTop: 0
        });
    }
});

});

サイドバーの高さがウィンドウの高さよりも大きいため、サイドバーの下部に簡単にアクセスできません。下にスクロールすると、サイドバーも下がります...

サイドバーが最後に到達した後にのみスクロールを開始したいと思います...これまでのところ、この結果は部分的にしか得られませんでした:

if ( jQuerywindow.scrollTop() > jQuerysidebar.height()  ) {

明らかなように、その後 scrollTop の値がサイドバーの高さよりも大きくなると、再びスクロールし続けます...したがって、このコードは一度だけ機能します:D

最後に到達した後にのみサイドバーをスクロールさせるより良い方法はありますか?

他の解決策も試しましたが、新しい試みごとに別の問題が発生しました。（私はjqueryを使用するのが初めてです...）

ご協力いただきありがとうございます：）

4

1 に答える 1

0

今日、コードを書き直そうとしましたが、これが結果です。

jQuery(document).ready(function() {

var jQuerysidebar = jQuery("#sb"),
    jQuerywindow = jQuery(window),
    offset = jQuerysidebar.offset(),
    sbh = jQuerysidebar.height(),
 footer = jQuery("#footer").offset().top;


 jQuerywindow.scroll(function() {

  // here It check the win scrolltop to be > than sidebar height + its offset.top value 
 // and in the same time that the sidebar height*2 (+offset.top) is not bigger than the footer offset top.
 // if this is true, than marginTop = sidebar height
    if ( (jQuerywindow.scrollTop()  > sbh+offset.top) & (((sbh*2)+offset.top) < footer)) {

           jQuerysidebar.stop().animate({
                marginTop: sbh
                    });
  // if the sidebar height*2 (+offset.top) is bigger than the footer offset.top value, than
  // the marginTop will be set = to the sidebar height - the difference between the sidebar height*2 and the footer (to this last value is also removed the sidebar offset.top)
  // 10 is for to add some more space between the sidebar and the footer
    }else if ((jQuerywindow.scrollTop()  > sbh+offset.top) & (((sbh*2)+offset.top) > footer))  { 
           jQuerysidebar.stop().animate({
             marginTop: (sbh + (footer-(sbh*2)) - (offset.top+10))
        });

    } else {  jQuerysidebar.stop().animate({
            marginTop: 0
        });
    }

  // here it does the same thing as above but for values of scrolltop > than sidebar height*2 (+ offset.top value)
            if  (jQuerywindow.scrollTop() > (sbh*2)+offset.top & (((sbh*3)+offset.top) < footer)) {
        jQuerysidebar.stop().animate({
                marginTop:  sbh*2                });

        }else if ( (jQuerywindow.scrollTop()  > (sbh*2)+offset.top) & (((sbh*3)+offset.top) > footer)) { 

          jQuerysidebar.stop().animate({
             marginTop: ((sbh*2) + (footer-(sbh*3)) - (offset.top+10))
        });

    }

})

});

その結果、サイドバーは移動を続けずに最後に到達した後にのみスクロールします。

それは機能します...しかし、少し長く、おそらく同じ結果を得るより良い方法があります.

新しいサイドバーのスクロールごとにコードを繰り返すことができます (ここでは、サイドバーは 2 回だけスクロールします)。

于 2013-05-14T15:57:12.043 に答える