Question

我有一个侧边栏，固定在滚动条上。一旦到达页脚，由于位置固定，它将与页脚重叠。所以我想在边栏到达页脚时删除固定位置。

<script>
$(function(){
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#stickyform').offset().top;
    var footer_top = $(".footer").offset().top;
    $(window).scroll(function(){
        if( $(window).scrollTop() > stickyHeaderTop > footer_top ) {
            $('#stickyform').css({position: 'fixed', top: '105px', width: '328px'});
        } else {
            $('#stickyform').css({position: 'static', top: '0px', width:'100%' , padding: '0px'});
        }
    });
});
</script>

Answer 1

首先，每次滚动页面时都要检查其偏移量

$(document).scroll(function() {
    checkOffset();
});

，如果在页脚之前将其降低到所需的像素数以下，则将其位置设为绝对。在下面的示例中，我采用10px

function checkOffset() {
    if($('#stickyform').offset().top + $('#stickyform').height() 
                                           >= $('#footer').offset().top - 10)
        $('#stickyform').css('position', 'absolute');
    if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
        $('#stickyform').css('position', 'fixed'); // restore when you scroll up
}

并看到#stickyform父级应该是页脚的同级

<div class="sticky-form-parent">
    <div id="sticky-form">
        Content...
    </div>
</div>
<div id="footer">
</div>

Check the Live demo

如何停止页脚上的固定侧边栏？

1 个答案: