jquery - 位置 : Fixed in Sidebar - How to stop it before footer?

Question

我在侧边栏中使用 jQuery float 小部件 - 链接到我的帖子 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 的位置仍然是 absolute在 footer 之上。这是因为你的return语句只会检查 top 是否元素的位置小于或等于 scrollTop()值，只能在scrolldown期间使用。就我而言，sticky已经在底部，isScrolledTo()还应该检查 top 是否sticky的div 大于或等于 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);
      }
    }
});

希望有帮助。