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;
}

每次向下滚动产品摘要时，我的页脚大约为400px会与页脚重叠。我尝试使用我在网上找到的东西，但无法弄清楚如何让它正常工作。

提前致谢。

修改：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。*

不需要单独的“固定”课程。

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

1 个答案: