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

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

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

具体来说，我想改变位置：固定DIV元素到位置：绝对当它到达页脚div的顶部时，这样有效地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'); } }); }); 

我想在#fixedbtn div中滚动超过＃footer-1 div的顶部时添加类“fixedPosition”，并在用户向上滚动时删除该类，以便＃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')) }); }); 

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

  
 
 
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.
 
 
 
 fixedbtn 
 #footer-1