jquery - 在页脚不起作用之前停止固定位置

Question

我有一个固定位置的元素:

.woocommerce #content div.product div.summary {
    position: fixed;
    right: 15%;
    padding: 20px;
    background-color: #ccc;
    width: 25%;
}

我想做的是让元素在页脚之前停止，我尝试了以下方法:

$(document).scroll(function (){
  if($('.woocommerce #content div.product div.summary').offset().top + $('.woocommerce #content div.product div.summary').height() >= $('footer').offset().top - 10){
    $('.woocommerce #content div.product div.summary').css('position', 'absolute');
  }

  if($(document).scrollTop() + window.innerHeight < $('footer').offset().top){
    $('.woocommerce #content div.product div.summary').css('position', 'fixed');
  } 
});

但我遇到了一些奇怪的行为，例如，它直接到顶部并且元素的宽度变得更小，我不知道如何修复它。

这是我的页面，我正在尝试在...

http://handyman-ondemand.com/product/electrical/

Answer 1

避免页脚超过 div.summary 的一种方法是在页脚上添加边距顶部，这是该 div 的高度。

#footer {
    margin-top: 500px;
}