如何確保 div 在滾動到它之後保持固定，無論其初始位置如何？-css教學-PHP中文網

如何確保 div 在滾動到它之後保持固定，無論其初始位置如何？

Barbara Streisand

發布： 2024-11-20 01:16:03

原創

331 人瀏覽過

How can you ensure a div stays fixed after scrolling to it, despite its initial position?

捲動到 Div 後固定它

問題：如何確保 div在滾動後保持固定儘管其最初的立場是

解決方案：

要實現此目的，有兩種主要方法：

僅CSS方法：
- 利用CSS位置：捲動到所需位置後固定屬性。
- 此解決方案可在現代瀏覽器中使用（有關詳細信息，請參閱 https://stackoverflow.com/a/53832799/1482443）。
jQuery方法：
- 使用 jQuery 監聽滾動事件。
- 使用 offset().top 方法決定所需 div 的初始位置。
- 套用如果捲動位置超過 div 的初始位置，則位置：固定樣式，否則恢復為位置：靜態。以下是 jQuery 程式碼：

var fixmeTop = $('.fixme').offset().top;

$(window).scroll(function() {

    var currentScroll = $(window).scrollTop();

    if (currentScroll >= fixmeTop) {
        $('.fixme').css({
            position: 'fixed',
            top: '0',
            left: '0'
        });
    } else {
        $('.fixme').css({
            position: 'static'
        });
    }

});

登入後複製

無論採用哪種方法，您都可以在捲動到 div 後有效地使其固定。在這兩種方法之間進行選擇時請記住考慮瀏覽器支援。

以上是如何確保 div 在滾動到它之後保持固定，無論其初始位置如何？的詳細內容。更多資訊請關注PHP中文網其他相關文章！