位置：固定在侧边栏中 - 如何在页脚之前停止它？

Question

我在边栏中使用 jQuery 作为浮动小部件 - 链接到我的帖子 http://www.product-investigation.com/fat-loss-factor-review - 如果你向下滚动，你会明白我的意思..我想在页脚之前在边栏中停止我的 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> 

Answer 1

我已更新您的jsfiddle。我改变了你的条件：

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

解释：我在下面添加的代码会将sticky div 定位在footer 的顶部，如果我使用您原来的return 语句并向上滚动，sticky div 的位置仍将是@ 987654327@ 在footer 之上。这是因为您的return 语句只会检查元素的top 位置是否小于或等于scrollTop() 值，该值只能在scrolldown 期间使用。在我的情况下，sticky 已经在底部，isScrolledTo() 还应该检查sticky div 的top 是否大于或等于scrollTop() 值。

并在.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);
      }
    }
});

希望对你有帮助。