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>

如果您确实希望/需要使用jQuery，则应在if语句中添加一个对scrollTop()的检查，使其值低于页面中页脚的顶部位置。根据jQuery版本，以下片段之一适合您的情况：

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

或

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

在页脚之前使固定位置Div Stop

2 个答案: