粘性布局实现慢滚动demo

moon son

已于 2022-09-22 13:27:29 修改

阅读量229

点赞数

文章标签： html javascript 前端

于 2022-09-22 13:27:04 首次发布

本文链接：https://blog.csdn.net/HYEHYEHYE/article/details/126989242

版权

要注意的两个点，不然粘性布局会失效：

1、粘性元素的父元素或者父元素的父元素等（总之就是直系长辈元素）任意一个设置overflow:hidden;overflow-x: hidden; overflow-y: hidden;overflow:auto;overflow-x:auto;overflow-y:auto;的任意一种时，就会不生效。

2、父元素的高度小于设置sticky元素的高度时，sticky也失效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粘性布局</title>
    <style>
        body{
            height: 2000px;
        }
        .box1{
            height:  100vh;
            background-color: pink;
        }
        .box2{
            height:  2000px;
            background-color: aquamarine;
        }
        .sticky{
            height:  100vh;
            position: sticky;
            position: -webkit-sticky;
            top: 0;
            background-color: blueviolet;
        }
        .box3{
            height: 100vh;
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2">
        <div class="sticky"></div>
    </div>
    <div class="box3"></div>
</body>
</html>

moon son

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
粘性布局实现慢滚动demo

1、粘性元素的父元素或者父元素的父元素等（总之就是直系长辈元素）任意一个设置overflow:hidden;的任意一种时，就会不生效。2、父元素的高度小于设置sticky元素的高度时，sticky也失效。
复制链接

扫一扫