首頁 > web前端 > css教學 > 如何讓 Div 滾動時粘在螢幕頂部?

如何讓 Div 滾動時粘在螢幕頂部?

DDD
發布: 2024-12-19 18:54:21
原創
726 人瀏覽過

How Can I Make a Div Stick to the Top of the Screen on Scroll?

使Div 在滾動時粘在屏幕頂部

創建一個在滾動後保持固定在屏幕頂部的divScript實現特定的滾動閾值。

CSS解決方案

使用CSS,一旦div 的頂部邊緣到達螢幕頂部,您就可以將其定位為固定:

.fixed-div {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}
登入後複製

JavaScript 解決方案

使用JavaScript,可以在捲動位置達到特定值時動態改變div的位置value:

$(window).scroll(function(e) {
    var $div = $('.fixed-div');
    var scrollTop = $(this).scrollTop();
    if (scrollTop > 200) {
        $div.css('position', 'fixed');
        $div.css('top', '0');
    } else {
        $div.css('position', 'static');
        $div.css('top', '0');
    }
});
登入後複製

在此腳本中,jQuery的scroll()函數用於監聽滾動事件。當scrollTop位置超過200時,給div一個固定位置,設定到頁面頂部。當scrollTop下降到200以下時,div將恢復到靜態位置。

以上是如何讓 Div 滾動時粘在螢幕頂部?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板