jquery - 几乎到达底部时停止固定位置

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 像素的页脚，每次向下滚动时产品摘要都会与页脚重叠。我尝试使用我可以在网上找到的东西，但无法弄清楚如何让它正常工作。

提前致谢。

编辑: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});
    }

});

更新*

不需要单独的“固定”类。