1

サイドバーのフローティング ウィジェットに jQuery を使用しています。フッターの前にサイドバーの私の AdSense ウィジェットを停止するには..助けてくれてありがとう:)

私のJavaScript

<script>
$(document).ready(function() {
        function isScrolledTo(elem) {
            var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen
            var docViewBottom = docViewTop + $(window).height();
            var elemTop = $(elem).offset().top; //num of pixels above the elem
            var elemBottom = elemTop + $(elem).height();
            return ((elemTop <= docViewTop));
        }
        var catcher = $('#catcher');
        var sticky = $('#sticky');
        $(window).scroll(function() {
            if(isScrolledTo(sticky)) {
                sticky.css('position','fixed');
                sticky.css('top','100px');
            }
            var stopHeight = catcher.offset().top + catcher.height();
            if ( stopHeight > sticky.offset().top) {
                sticky.css('position','absolute');
                sticky.css('top',stopHeight);
            }
        });
    });
    </script>
4

1 に答える 1

3

jsfiddleを更新しました。私はあなたの条件で何かを変更しました:

return ((elemTop <= docViewTop || elemTop >= docViewTop)); //Changed your return in isScrolledTo

説明: 以下に追加したコードはsticky、 の上部に div を配置しfooterます。元のreturnステートメントを使用して上にスクロールすると、stickydiv の位置absoluteはfooter. これは、returnステートメントがtop、要素の位置が値以下であるかどうかのみをチェックするためscrollTop()です。これは、中にのみ使用できますscrolldown。stickyがすでに下部にある私の場合、はdiv の が値以上かどうかもisScrolledTo()チェックする必要があります。topstickyscrollTop()

そしていくつかのものを追加しました.scroll()

$(window).scroll(function() {
    if(isScrolledTo(sticky)) {
      sticky.css('position','fixed');
      sticky.css('top','2px');
    }
    var stopHeight = catcher.offset().top + catcher.height();
    var stickyFoot = sticky.offset().top + sticky.height();

    if(stickyFoot > footTop -10){ //Check if sticky's foot passes footer's top
      console.log("Top of Footer");
      sticky.css({
        position:'absolute',
        top: (footTop - 20) - sticky.height()
      });
    } else {
      if ( stopHeight > sticky.offset().top) {
        console.log("Default position");
        sticky.css('position','absolute');
        sticky.css('top',stopHeight);
      }
    }
});

それが役に立てば幸い。

于 2013-01-12T03:18:41.453 に答える