首頁 >web前端 >css教學 >如何確保 div 在滾動到它之後保持固定,無論其初始位置如何?

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

Barbara Streisand
Barbara Streisand原創
2024-11-20 01:16:03309瀏覽

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

捲動到 Div 後固定它

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

解決方案:

要實現此目的,有兩種主要方法:

  1. 僅CSS方法:

    • 利用CSS位置:捲動到所需位置後固定屬性。
    • 此解決方案可在現代瀏覽器中使用(有關詳細信息,請參閱 https://stackoverflow.com/a/53832799/1482443)。
  2. 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn