一秒钟实现吸顶效果：position:sticky
2020-05-27 本文已影响0人
前端架构师陈龙威
史上最简单的吸顶效果，没有之一，只用css一分钟搞定上下左右吸顶效果
参考资料：
张旭鑫的深入理解sticky：
https://www.zhangxinxu.com/wordpress/2020/03/position-sticky-rules/
css中的position:sticky，主要用于设计吸顶等炫酷效果。支持上下左右吸顶。
吸顶以及内部吸底效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>吸顶效果</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{margin: 0}
body {
margin: 0;
padding: 100px;
height: 2000px;
}
h4 {
margin: 2em 0 0;
background: #333;
color: #fff;
padding: 10px;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
}
ul{
background: yellow;
}
ul:first-child{
background: transparent;
}
.memo{
position: sticky;
z-index: -1;
bottom: 50%;
background: red;
}
</style>
</head>
<body>
position:sticky 粘滞特性效果定位
1. position:sticky完全受制于它的父级元素，要实现它的特性，父级元素不能有overflow:visible以外的overflow设置，否则没有粘滞效果
所以sticky失效很大可能是父级设置了overflow:hidden;
2. 父级元素的高度值如果和粘性定位元素等高，也会使之失去粘滞特性
3. 粘滞效果定位可上下左右方向。所以扩展到父级元素宽度与粘性元素相等，左右粘性会消失。粘性定位设置：top,bottom,left,right
<h1>时间固定demo</h1>
<div class="wrapper">
<section>
<h4>5月27日</h4>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="memo">这是备注</div>
</section>
<section>
<h4>5月26日</h4>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="memo">这是备注</div>
</section>
<section>
<h4>5月27日</h4>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="memo">这是备注</div>
</section>
<section>
<h4>5月26日</h4>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="memo">这是备注</div>
</section>
<section>
<h4>5月27日</h4>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="memo">这是备注</div>
</section>
<section>
<h4>5月26日</h4>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="memo">这是备注</div>
</section>
</div>
</body>
</html>
左侧吸顶效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
.title{
height: 90px;
width: 150px;
position: sticky;
left: 0;
z-index: 1;
background: green;
display: inline-block;
margin-left: 100px;
}
.box{
height: 90px;
width: 150px;
background: yellow;
margin-right: 10px;
display: inline-block;
overflow: visible;
}
</style>
</head>
<body>
吸顶效果的实现要注意两点：
1. 吸顶元素的父级不能出现除overflow:visible以外的overflow样式，所以滚动条就应该放在父级的外层。
2. 吸顶元素滚动到一定程度会被带走，而带走的条件就是它的父级所形成的粘性约束矩形滚动到了，把它带走了，所以如果你设置它的父级无限长
或高，或者滚动内容小于它的父级，那它就可以一直吸顶,gif中红线边框就是吸顶元素父级的粘性约束矩形，就是父级的长宽。
<div style="overflow-x: scroll; height: 100px;">
<section style="white-space: nowrap;width: 2000px; height: 94px; border: 2px solid red;">
<div class="title">
这是头部
</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
</section>
</div>
<div style="margin-top: 50px; overflow-x: scroll; height: 100px;">
<section style="white-space: nowrap;width: 300px; height: 94px; border: 2px solid red;">
<div class="title">
这是头部
</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
</section>
</div>
</body>
</html>
