sticky吸顶效果-真香
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了sticky吸顶效果-真香相关的知识，希望对你有一定的参考价值。
参考技术A 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）
[css] 小案例---滚动吸顶
position:sticky;是粘性定位，专门用于页面滚动的时候的定位，可以方便实现吸顶条的效果。
粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位(relative)，之后为固定定位(fixed)
#box position: sticky; top: 10px;
<!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>Document</title>
<style>
*
margin: 0;
padding: 0;
header,footer
height: 30px;
background-color: rgb(218, 143, 143);
text-align: center;
nav
height: 20px;
background-color: rgb(144, 179, 233);
text-align: center;
position: sticky;
top: 10px;
section
height: 1200px;
background-color: rgb(212, 24, 24);
text-align: center;
font-size: 50px;
</style>
</head>
<body>
<header>头部</header>
<nav>导航</nav>
<section>主体</section>
<footer>尾部</footer>
</body>
</html>
使用条件：
- 父元素不能overflow:hidden或者overflow:auto属性。
- 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位。
- 父元素的高度不能低于sticky元素的高度。
- sticky元素仅在其父元素内生效。
以上是关于sticky吸顶效果-真香的主要内容，如果未能解决你的问题，请参考以下文章