在页脚之前使固定位置 Div 停止

Posted 2023-05-08

【中文标题】在页脚之前使固定位置 Div 停止

【英文标题】：Make Fixed Position Div Stop before footer

【发布时间】：2020-10-16 15:59:28

【问题描述】：

我有一个滚动和固定的 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>

【问题讨论】：

你能用我现有的代码帮助我一些示例代码吗？

我已经更新了 html，我正在使用 bootstrap4 类进行固定和粘性

【参考方案1】：

您应该使用position: sticky; CSS 属性，同时指定top。您根本不需要使用 javascript。 这是一个sn-p：

.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 版本，以下 sn-ps 之一将适合您的情况：

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

或

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

【讨论】：

嗨，克里斯蒂安，我已经用 Html 代码结构示例更新了我的问题，我使用了这个粘性类，但我需要将粘性的东西继续到其父行下方的下一行，这就是我改变的原因它从粘性到固定。这是我需要实现目标的页面示例 - api.happyvoyaging.com/en/tour-packages/114/…

@GauravSingh 感谢您的通知。我还编辑了答案的最后一部分，因为我注意到我错过了一些东西。在您的情况下，第二个选项（带有额外条件）应该可以工作，因为它不关心容器的结构。请告诉它是否适合您的情况

先生，我已尝试用您的 if 语句替换我的 if 语句，这似乎不起作用。

@GauravSingh 请检查这个 JSFiddle：jsfiddle.net/y4cpbjz5

先生，我可以看到在您的小提琴中它按预期工作，但是当我在我的实时页面中实现您的代码时，它仍然与页脚重叠并且无法正常工作。

【参考方案2】：

类似

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

【讨论】：

感谢 Razvan 的创意！你和 Cristian 的代码给了我解决它的想法。