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

Question

我有一个“粘性元素”div，在页面加载，我已经设置的位置:固定与右下角对齐。

Requirement：在页面卷轴上，我想把它设置在前面的“页脚区域”上。

visible ：我已经成功地处理了css和js加载部件，但是我无法找到这样的逻辑:一旦“页脚区域”在窗口上开始可见，我如何向我的“粘滞元素”中添加另一个类。

<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; }

.粘滞-元素.某些类{位置:静态；}

在上面的一个 if ()中，我的逻辑是，如果在窗口上可以看到“页脚区域”，那么只使用add就行了。

请建议，如果有人有简单和简短(不太复杂)的编码方式。

提前感谢

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");
        }
    });
  });