当它到达几乎底部时停止固定位置

Question

我已经阅读了很多有关这种情况的stackoverflow的线程，并试图用jquery或html/css他们的方式，但我只是不停地工作的方式想要的。有人能帮我一下吗？

我的HTML

<div id="product-summary-position"> 
    <div id="product-fixed"> 
     <div id="product-summary"> 
      <header>Product Summary</header> 
      <div class="price" name="product-summary-price">$0.00</div> 
      <header>Have Questions?</header> 
      <p>Call our Product Experts<br> 1-877-270-3311</p> 
      <button class="btn-reset">Reset</button> 
     </div> 
    </div> 
</div> 

我的CSS

#product-summary-position{float: right; 
    height: 185px; 
    width: 185px;} 

div#product-summary { 
    font-family: 'roboto'; 
    height: 230px; 
    width: 185px; 
    background-color: #2A0092; 
    border-radius: 5px; 
    text-align: center; 
    color: #FFF; 
    top: 250px; 
} 

div#product-fixed { 
    position: fixed; 
} 

我有一个页脚这是近似400像素每个I向下滚动产品汇总时间将重叠页脚。我尝试使用我可以在网上找到的东西，但无法弄清楚如何使它正常工作。

在此先感谢。

编辑：jsfiddle

Answer 1

尝试this。

---

解决方案

改变你的HTML这样的：

<div id="product-summary-position"> 
    <div id="product-fixed"> 
     <div id="product-summary"> 
      <header>Product Summary</header> 
      <div class="price" name="product-summary-price">$0.00</div> 
      <header>Have Questions?</header> 
      <p>Call our Product Experts 
       <br>1-877-270-3311</p> 
      <button class="btn-reset">Reset</button> 
     </div> 
    </div> 
</div> 

<footer id="wholeFooter"> 
    <!-- move entire footer to separate block element --> 
    <div class="footer2"> 
     ... 
    </div> 
    <div class="footer2"> 
     ... 
    </div> 
</footer> 

而且，JavaScript的：

var doc = $(document); 

doc.scroll(function() { 
    // make sure to wrap yours entire footer in some css selector 
    var footer = $('#wholeFooter'); 
    var p = $('#product-fixed'); 
    var s = $('#product-summary-position'); 

    var top = doc.scrollTop() + s.offset().top * 2 + p.height(); 
    var footerTop = footer.offset().top; 

    var offset = footerTop - top; 

    if (offset < 0) { 
     p.css({'margin-top': '' + offset + 'px'}); 
    } else { 
     p.css({'margin-top': 0}); 
    } 

}); 

UPD *

单独的“固定”班是不必要的。