當滾動到另一個 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>