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

将 Div 固定到屏幕顶部

要达到所需的效果，请将 div 放置在其他内容下方并设置其初始位置为绝对或相对。一旦页面滚动到足以使 div 的顶部边缘与视口对齐，请将位置修改为固定并将顶部值重置为零。

CSS:

.sticky-div {
    position: absolute;
    top: initial;
    width: 100%;
}

.sticky-div.fixed {
    position: fixed;
    top: 0;
}

JavaScript (jQuery):

$(window).scroll(function() {
    var div = $('.sticky-div'),
        scrollTop = $(this).scrollTop();

    if (scrollTop > 200) {
        div.addClass('fixed');
    } else {
        div.removeClass('fixed');
    }
});

当滚动顶部时超过 200，div 变得固定并随视口滚动。向后滚动将删除固定类别，恢复其原始位置。

以上是如何让div滚动时粘在屏幕顶部？的详细内容。更多信息请关注PHP中文网其他相关文章！