如何创建一个固定在滚动屏幕顶部的粘性 Div？

创建一个粘贴到屏幕顶部的粘性 Div

问题：

您试图创建一个最初保留在内容块下方的 div。然而，当向下滚动页面并到达 div 的顶部边界时，它会变得固定并沿着页面滚动。

解决方案：

使用具有固定定位属性的 CSS达到预期目的功能：

.fixedElement {
    background-color: #c0c0c0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

编辑：

为了确保 div 保持粘性，它最初应该具有绝对定位。到达元素的滚动偏移量后，定位更改为固定，顶部位置设置为零。

使用scrollTop函数检测文档的顶部滚动偏移量：

$(window).scroll(function(e) {
    var $el = $('.fixedElement');
    var isPositionFixed = ($el.css('position') == 'fixed');
    if ($(this).scrollTop() > 200 && !isPositionFixed) {
        $el.css({'position': 'fixed', 'top': '0px'});
    }
    if ($(this).scrollTop() < 200 && isPositionFixed) {
        $el.css({'position': 'static', 'top': '0px'});
    }
});

当滚动时offset 达到 200，元素变得固定并粘在浏览器窗口的顶部。

以上是如何创建一个固定在滚动屏幕顶部的粘性 Div？的详细内容。更多信息请关注PHP中文网其他相关文章！