position:sticky的用途详解
我们可以怎样来设定一个position: sticky？
position: sticky非常适合iOS样式列表标题。滚动内容并在标题0px从top边沿击中后调查标题。
.heading{
background: #ccc;
height: 50px;
line-height: 50px;
margin-top: 10px;
font-size: 30px;
padding-left: 10px;
position: -webkit-sticky;
position: sticky;
top: 0px;
}要是会员向下滚动，您但愿列表标题维持可见。要是向上滚动，您还但愿“增加项目”页足可见。试试吧！向上和向下滚动并调查这些元素在抵达视口边沿后怎样粘附：
header{
background: #ccc;
font-size: 20px;
color: #282a37;
padding: 10px;
position: -webkit-sticky;
position: sticky;
top: 0;
}
footer{
background: #ccc;
padding: 10px;
color: #ae81fe;
position: relative;
position: -webkit-sticky;
position: sticky;
}
footer{
bottom: 0;
}
list{
border: 1px solid #ccc;
border-radius: 5px;
width: 200px;
margin-left: 20px;
background: #282a37;
}
item{
padding: 10px;
color: #fff;
display: block;
}
body{
padding-top: 20px;
display: flex;
align-items: flex-start;
}
.abs{
position: absolute;
right: 0;
top: 10px;
}您还可以将项目粘贴到左侧或右边边沿。这是一个侧面图像查看器，带有图像的扭转文本描述。将其向侧面滚动并调查，由于描述停泊在左侧，在视图中，直到新描述将其推开。
div[description]{
max-width: 40px;
height: 300px;
position: -webkit-sticky;
position: sticky;
left: 0; /* become sticky once touching left edge */
}
sidescroller{
display: flex;
align-items: center;
overflow-x: auto;
overflow-y: hidden;
background: #000;
}
div[wrapper]{
flex: 0 0 40px;
max-width: 40px;
height: 300px;
position: -webkit-sticky;
position: sticky;
left: 0;
white-space: nowrap;
color: #fff;
}
div[item]{
display: flex;
}
div[description] span{
display: inline-block;
background: rgba(0,0,0,.5);
width: 300px;
height: 40px;
transform: rotate(-90deg) translateX(-300px);
transform-origin: left top 0;
padding-top: 11px;
text-align: center;
text-transform: uppercase;
color: #fff;
font-size: 14px;
}
img{
max-height: 300px;
}当局部或全部元素滚动出视图时，您甚至可以指定元素变为粘性时指定负数！这可能是实用的，例如侧边栏菜单在滚出视图时变得粘滞，留下一个小按钮，当点击时可以跳回侧边栏：
.sidebar{
background: purple;
width: 200px;
height: 300px;
padding: 20px;
flex-shrink: 0;
overflow: visible;
position: -webkit-sticky;
position: sticky;
left: -200px;
}
.sidebar .handle{
height: 30px;
width: 30px;
position: absolute;
right: -30px;
top: 0;
background: purple;
color: #fff;
font-weight: bold;
font-size: 20px;
padding-left: 8px;
cursor: pointer;
}
p{
padding: 20px;
}
.site{
display: flex;
}运用position: sticky很简略。
1、将元素声明为sticky position:sticky（加上所需的任何阅读器前缀position: -webkit-sticky）
2、指定要“粘贴”的项目的边（顶部|右边|底部|左侧）。
3、输入距所述边沿的距离，当抵达时将激活粘性。
例如，假如您但愿标题在距离滚动区域顶部20px时变为粘性：
.header{
position: -webkit-sticky;
position: sticky;
top: 20px;
}或者像上面的例子同样滚动到视图以外的左边沿菜单：
.menu{
width: 200px;
position: -webkit-sticky;
position: sticky;
left: -200px;
}position: sticky的注意事项
同级元素
要是将同级（相邻）元素设定为position: sticky，则它们的行为与嵌套项目中的元素略有不一样。粘性兄弟元素不会为新元素挪移。相反，它们会重叠到位：
Overflow（溢出）
不要运用overflow: auto|scroll|hidden在position:sticky元素的父元素上，这会完全打破了粘性，但是overflow: visible可以。
绝对定位（position:absolute）
要是你想在一个粘性元素内部运用position:absolute元素，你必需要细心了。要是您的利用程序在不支撑的旧阅读器中运转position:sticky，那么该粘性元素将不会像相对定位元素那样运转。因而，绝对定位元素将跳过它并查寻DOM树，直到寻到下一个非静态元素（绝对|相对牢固位置），html要是没有寻到则默许为元素。换句话说，您的绝对定位元素将在屏幕上与您预测的不一样。要是你正在建设一些旧的阅读器，有人可能会以为这种状况的解决办法就是相对定位和粘性定位都设定：
.footerwithAbsolutePositionedeChildren{
position: relative;/*don't forgot this*/
}
/*NOTE: @supports has to be at the root,not nested*/
@supports(position:sticky){
.footerwithAbsolutePositionedeChildren{
position: sticky;
bottom: 20px;/now this won't mess with position in non-sticky browsers*/
}
}为何不运用JavaScript？
应用JS你绝对可以实现这个。但这将波及一个scroll事件监听器，这依然是一个非常昂贵的东西增加到您的利用程序。滚动是会员施行的最常见操纵之一，而且在这些事件期间施行JavaScript使得难以保持不乱的60 FPS（每秒帧数）滚动。UI与会员的鼠标/手指/手写笔不一样步。这称为滚动jank。有一种特别的事件监听器称为被动事件监听器，它让阅读器晓得您的事件不会休止滚动，因而阅读器可以更好地优化这些事件。但是在IE或Edge中它们还不支撑，不管怎样你都需要JS后备办法。
此外，因为position:sticky您在滚动期间没有写入DOM，因而您不会致使任何强迫布局和布局从新盘算。因而，阅读器能够将此操纵挪移到GPU，即便粘性元素在播放中，您也可以非常流通地滚动。它在挪移Sarari中特殊流通。
别的，编写两行声明式CSS比运用JS替换方案更容易。
我此刻可以用吗？
position:sticky许多阅读器都支撑，但Edge中尚无。除非您在Enterprise Town负担合同义务，不然IE在此处无关大局。要是你必需有这种行为，那里有许多polyfill，但它们都运用JavaScript，所以你将获得上面提到的机能。一个更好的选中是设计你的利用程序，以便粘性位置是一个光滑的增加，但利用程序依然没有它的功能。
以上就是position: sticky的用途详解的细致内容，更多请关注 百分百源码网 其它相干文章！
