粘性布局以及粘性布局失效问题

最新推荐文章于 2023-05-03 14:29:09 发布

paidaboluo

最新推荐文章于 2023-05-03 14:29:09 发布

阅读量2.7k

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/paidaboluo/article/details/126021676

版权

在页面中，需要侧边的导航栏，除了固定于浏览器的还有一种当浏览器滚动到相对导航栏某个距离时，导航栏不再固定，而是和浏览器的滚动一起向下移动

这就是粘性布局

// css
.box{
    width: 1200px;
    margin: auto;
}
.top{
    height: 300px;
    background-color: brown;
     margin-bottom: 20px;
}
.container {
    background: #eee;
    height: 10000px;
    display: flex;
    justify-content: space-between;
}
.left {
    position: -webkit-sticky;
    position: sticky;
    height: 100px;
    background: #ff7300;
    top: 10px;
    width: 100px;
}
.mian{
    width: 900px;
    height: 2000px;
    background: pink;
}
.right{
    width: 100px;
    background-color: blueviolet;
}

<div class="box">
    <div class="inBox">
        <div class="top"></div>
        <div class="container">
            <div class="left">内容1</div>
            <div class="mian"></div>
            <div class="right"></div>
        </div>
    </div>
</div>

这就是简单的粘性布局的应用，但是粘性布局也是有一定前提的，需要父级overflow：visible（这是默认值），当这个值是hidden或其他值的时候，粘性布局就会失效

.box{
    width: 1200px;
    margin: auto;
    /* overflow: hidden; */
}
.inBox{
    /* overflow: hidden; */
}
.container {
    background: #eee;
    height: 10000px;
    display: flex;
    justify-content: space-between;
    /* overflow: hidden; */
}

这几个地方的设置这个值粘性布局就会失效，并且当开启粘性布局的盒子，的直属父级在这里是.container，粘性布局会像相对布局效果一样（内容1和灰色背景）