CSS中position: sticky与overflow发生冲突如何解决

小半 • 2024年2月29日下午3:25 • 前端开发 • 阅读 525

今天遇到一个css的问题：之前通过sticky设置的吸顶效果突然不见了，经过一番查证后发现这是因为在其父布局中添加了overflow属性导致sticky失效了。接下来，我们来了解一下sticky的设置、失效原因以及如何解决sticky失效。

Sticky吸顶

Sticky是一个比较会常用到的功能，其实现也比较简单，我们只需要给一个容器设置成”position: sticky;”，指定系统条件即可实现一个简易的吸顶效果，实现代码如下：

// css 代码

    <style>
        .sticky {
            width: 900px;
            position: -webkit-sticky;
            /* Safari */
            position: sticky;
            top: 0px;
            height: 46px;
            line-height: 46px;
            box-shadow: 5px 2px 2px #f3f3f3;
            background-color: aqua;
            color: white;
            font-weight: bold;
        }

        .content {
            width: 100%;
            height: 800px;
        }
    </style>

// html代码
<body>
    <div class="main">
        <div class="sticky">这是一个吸顶控件</div>
        <div class="content">
            主题内容
        </div>

    </div>
</body>

什么会导致Sticky不生效？

sticky不生效总结可以大致分为如下三类问题：

父元素或祖先元素中设置了overflow:hidden;overflow-x: hidden; overflow-y:
没有设置定位属性：top/bottom/left/right属性进行粘性定位
父元素的高度不能低于sticky元素的高度

如何解决Sticky不生效问题

一般出现overflow与sticky冲突的问题，我们通常是通过监听页面容器的滑动判断滑动高度，并通过生成克隆层实现顶部粘粘，达到指定效果，统一的当页面滑动下来的时候再将克隆层删除实现页面的下滑。

/* 粘顶导航栏 */
/* 克隆的是class="sticky"的一个navbar */
var pscroll = 0; //滚动高度
var iscroll = 0; //循环因子
$(window).scroll(function(){
    pscroll = $(this).scrollTop();
    if(0<pscroll && iscroll === 0){
        var stickyClone = $(".sticky").clone(true).removeClass("sticky").addClass("stickyClone").css("top","0").css("visibility","hidden");
        $(".sticky").before(stickyClone);
        $(".sticky").css("z-index","1020");
        $(".sticky").css("position","fixed");
        $(".sticky").css("top","0");
        $(".sticky").css("right","0");
        $(".sticky").css("left","0");
        iscroll = 1;
    }
    if(0<pscroll){
        //下滚
    }else{
        $(".sticky").css("position","relative"); //可设为默认"static"
        $(".stickyClone").remove();
        iscroll = 0;
    }
});