Question

在页面加载时，我有一个“粘性元素” div，它已设置为位置：固定在右下角。

要求：在页面滚动中，我希望将其设置为在“页脚区域”之前紧贴。

问题：我已经成功处理了加载时的css和js部分，但是我无法找到逻辑，一旦“页脚区域”如何将另一个类添加到我的“粘滞元素”中“将开始在窗口上显示。

HTML

<div class="container">
<div class="page-section">
    <p>lots of code and other div nested in this as well</p>
</div>
<div class="sticky-element">
</div>
<div class="footer-area">
</div>
</div>

jquery

$(window).on("load",function(){
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if(){
        $(".sticky-element").addClass("some-class");
    }

    else {
        $(".sticky-element").removeClass("some-class");
    }
});

}）;

css

.sticky-element { position:fixed; }

.sticky-element.some-class {position：static; }

在上面的 if（）中，我的逻辑是我想使用“页脚区域”在窗口上可见而不是仅添加类起作用的情况。

请建议是否有人为此使用简单且简短（不太复杂）的编码方式。

预先感谢

Answer 1

尝试类似的事情：

     <div class="container">
         <div id='wraper'>
            <div class="page-section">
              <p>lots of code and other div nested in this as well</p>
            </div>
            <div class="sticky-element">
            </div>
         </div>
         <div class="footer-area">
         </div>
     </div>


   $(window).on("load",function(){
    $(window).scroll(function() {    

        var bottomOfWraper = $('#wraper').offset().top + $('#wraper').outerHeight();
        var bottomOfWin = $(window).scrollTop() + $(window).height();

        if( bottomOfWin > bottomOfWraper){
            $(".sticky-element").addClass("some-class");
        }

        else {
            $(".sticky-element").removeClass("some-class");
        }
    });
  });

在滚动“粘性元素”上，需要坚持到“页脚区域”之前而不是页面底部

1 个答案: