胖蔡说技术
随便扯扯

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

今天遇到一个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不生效问题

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

/* 粘顶导航栏 */
/* 克隆的是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;
    }
});
赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » CSS中position: sticky与overflow发生冲突如何解决
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏