一想到吸顶效果，是不是就要监听scroll事件，然后一番js操作呢？
起初小编也是通过监听scroll事件，去实现的吸顶效果，这里不详细说明这一方案了
今天给大家介绍一下css3的新特性(担心自己是最后一个知道的，赶紧自己捣鼓一下)
position:sticky
粘性定位可以被认为是相对定位（relative）和固定定位（fixed）的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。
也就是说sticky会让元素在页面滚动时如同在正常流中（relative定位效果），但当滚动到特定位置时就会固定在屏幕上如同 fixed ，这个特定位置就是指定 的top, right, bottom 或 left 四个阈值其中之
了解了sticky，就来尝一尝它的味道吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #eee;
}
ul{
padding: 20px 0 0 0;
padding:0;
height: 100%;
width: 100%;
overflow: auto;
border-radius: 10px;
}
li{
line-height: 100px;
height: 100px;
box-shadow: 1px 1px 3px #ddd;
text-align: center;
margin: 0 20px 20px 20px;
border-radius: 10px;
list-style: none;
background-color: white;
}
.sticky-bar{
line-height: 50px;
height: 50px;
position: sticky;
top: 0;
font-weight: 600;
background-color: bisque;
}
</style>
</head>
<body>
<script>
const list = [
'2016.08',
'2016.09',
'2016.10',
'2016.11',
'2016.12',
'2017.07',
'2017.08',
'2017.09',
'2017.10',
'2017.11',
'2017.12',
'2018.07',
'2018.08',
'2018.09',
'2018.10',
'2018.11',
'2018.12',
'2019.01',
'2019.02',
'2019.03',
'2019.09',
'2019.10',
'2019.11',
'2019.12',
'2020.01',
'2020.02',
'2020.03',
'2020.04',
'2020.05',
'2020.06',
'2020.07',
]
renderList(list);
function renderList(list) {
const docFragment = document.createDocumentFragment();
const ul = document.createElement('ul');
let preYear = '';
for (const item of list) {
const year = item.split('.')[0];
if (year != preYear) {
preYear = year;
const yearLi = document.createElement('li');
yearLi.innerText = year;
yearLi.classList = 'sticky-bar';
ul.appendChild(yearLi);
}
const li = document.createElement('li');
li.innerText = item;
ul.appendChild(li);
}
docFragment.appendChild(ul);
document.body.appendChild(docFragment);
}
</script>
</body>
</html>
所以，其实呢sticky不仅可以做吸顶效果，它支持四个方向上的吸附，left,right,bottom,top
比如吸底效果在项目中也很常见的，下面给大家看看吸底的效果
（.sticky-bar添加bottom:0）
网友评论