Javascript “在卷轴上”；粘性元素“；将需要坚持“以前”；页脚面积“；不在页面底部

我有一个“sticky element”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>

}))

css

.sticky-element { position:fixed; }

.sticky-element.some-class{position:static；}

在上面的一个if（）中，我的逻辑是，如果“页脚区域”在窗口上可见，则我希望使用，而不是只使用add类

请建议是否有人有简单和简短（不太复杂）的编码方式为这一点

---

提前感谢

试试这样的方法：

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

大量的代码和其他div也嵌套在其中

$（窗口）.on（“加载”，函数（）{
$（窗口）。滚动（函数（）{
变量bottomOfRapper=$（'#wrapper'）.offset（）.top+$（'#wrapper'）.outerHeight（）；
var bottomOfWin=$（窗口）.scrollTop（）+$（窗口）.height（）；
if（底部OFWIN>底部OFFRAPER）{
$（“.sticky元素”）.addClass（“某些类”）；
}
否则{
$（“.sticky元素”）.removeClass（“某个类”）；
}
});
});

感谢@Tomas提供了如此漂亮、清晰的解决方案，您使用了很好的逻辑，我已经尝试过了，我在这里发现的唯一问题是，当我到达页脚区域时，页面将闪烁。我将尝试从我的末端修复它来解决它，rest逻辑工作正常。如果你需要检查css，我的问题css部分也已经更新。对不起，我不明白你的问题是什么。

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