position: sticky的用法详细说明

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

CSS中的position: sticky让我们可以在很少的代码行中构建一些非常简洁的交互。当用户滚动时希望UI元素在视图中留在任何时候它都很有用，但是直到该元素与滚动视窗的顶部/底部/左侧/右侧的egde达到特定距离时才变得粘性。

我们可以如何来设置一个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、指定要“粘贴”的项目的边（顶部  
关键词：position: sticky的用法详细说明