如何让 Div 滚动时粘在屏幕顶部？

使 Div 在滚动时粘在屏幕顶部

创建一个在滚动后保持固定在屏幕顶部的 div可以使用 CSS 或 JavaScript 实现特定的滚动阈值。

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中文网其他相关文章！