当滚动到另一个 HTML 元素时，将 CSS 类动态添加到固定 DIV

Question

我在 StackOverflow 上阅读了几个类似的问题，可惜没有一个解决方案对我有用。

我想在页面向下滚动经过另一个 html 元素时向 html 元素动态添加一个 css 类，并在用户向上滚动页面时删除该类。

具体来说，我想在到达页脚 div 顶部时将 DIV 元素的 position:fixed 更改为 position:absolute，以便有效地将 DIV 元素停止固定到屏幕底部并粘在页脚顶部div，以便它保持在那里，而用户继续向下滚动页面的其余部分。

我尝试改编几个 JavaScript 代码片段，但没有一个按照我想要的方式工作。 这是我最好的尝试：

 $(function() {
  var menu = $('#fixedbtn');
 $(window).scroll(function() {
   var scroll = $(window).scrollTop();

if (scroll >= $('#footer-1').offset().top) { // check the offset top
  menu.addClass('fixedPosition');
} else { // check the scrollHeight
  menu.removeClass('fixedPosition');
}
 });
});

我想将类“fixedPosition”添加到#fixedbtn div，当它滚动超过#footer-1 div 的顶部时，并删除该类，当用户向上滚动时，以便#footer-1 下沉离开视口底部。

在这种情况下，使用与页面顶部的固定像素距离对我不起作用。 当 <#footer-1> div 的顶部出现在用户的屏幕底部时，我希望将类添加到 div 的事件触发器触发。

各位密码诗人，能否请您指导我找到实现预期结果的正确解决方案？

Answer 1

希望这有帮助

 $(function () { var menu = $('#fixedbtn'); function isInViewport($this) { var elementTop = $this.offset().top; var elementBottom = elementTop + $this.outerHeight(); var viewportTop = $(window).scrollTop(); var viewportBottom = viewportTop + $(window).height(); if (elementTop < viewportBottom == true) { menu.addClass('fixedPosition'); } else { menu.removeClass('fixedPosition'); } } $(window).scroll(function () { isInViewport($('#footer-1')) }); });

 .conatiner { height: 2000px; } #footer-1 { background-color: red; position: relative; } #fixedbtn { background-color: blue; width: 55px; height: 20px; position: fixed; left: 0; bottom: 0; } #fixedbtn.fixedPosition { background-color: white; position: absolute; left: 0; top: 0; } .stuck { height: 800px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="conatiner"> <div class="stuck"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </div> <div id="footer-1"> <div id="fixedbtn"> fixedbtn </div> #footer-1 </div> </div>