固定位置 Div 在页脚前停止

Question

我有一个滚动和固定 div 位置，我希望它在到达页脚之前停止，因为它重叠在页脚上。

这是目前为止的代码

<script>
    $(window).scroll(function() {
        if ($(window).scrollTop() >= 330) {
            $('#stickyblock').addClass('position-fixed');
            $('#stickyblock').removeClass('sticky-top');
        } else {
            $('#stickyblock').removeClass('position-fixed');
            $('#stickyblock').addClass('sticky-top');
        }
    });
</script>

这会检测页眉并将 div 固定到顶部，但我希望它在碰到页脚时停止固定。

html代码

    <div id="header">Navigation and Logo</div>

<!-- First Row, here sticky element starts scrolling -->
    <div class="container">
    <div class="row>
    <div class="col-md-8">some content</div>
    <div class="col-md-4">
    <div class="sticky-top" id="stickyblock">some buttons or block of code</div>
    </div>
    <div>
    </div>
    
    <!--another row and full width container, where scroll should change from sticky to fixed-->
    <div class="container-fluid">
    <div class="row>
    <div class="col-md-8">some content</div>
    <div class="col-md-4">
    blank space(for fixed element to show)
    </div>
    <div>
    </div>
    
    <!--footer starts, here fixed div should stop-->
    <div id="footer"></div>

Answer 1

类似

var body = document.body,
    html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );
var footer = document.getElementsByTagName("footer")[0];
                       
$(window).scrollTop() > height - window.height or 
$(window).scrollTop() > height - footer.height - 600 //how many pixels do you want

Answer 2

您应该做的是使用 position: sticky; CSS 属性，并指定 top。您根本不需要使用 JavaScript。这是一个片段：

.footer {
  height: 1000px;
}

.container {
  height: 1000px;
}

.sticky {
  position: sticky;
  top: 0;
}

<div class="container">
  <div class="sticky">Sticky bar</div>
</div>

<div class="footer">Footer</div>

如果您 want/need 使用 jQuery，您应该在 if 语句中添加检查 scrollTop() 的值是否低于顶部页脚在页面中的位置。根据 jQuery 版本，以下片段之一将适合您的情况：

if($(window).scrollTop() >= 320 && $(window).scrollTop() < $('#footer').offset().top) ...

或

if($(window).scrollTop() >= 320 && $(window).scrollTop() < $('#footer').offsetTop) ...

固定位置 Div 在页脚前停止

Make Fixed Position Div Stop before footer

css

jquery

twitter-bootstrap-3