css粘性定位position：sticky
粘性定位是CSS的一个特性，它可以使元素在达到某个滚动位置时变为固定定位。这是通过position: sticky属性来实现的。粘性定位是相对定位和固定定位的混合，它会根据滚动位置在两者之间切换。
以下是一个使用粘性定位的例子：
<!DOCTYPE html>
<html>
<head>
<style>
.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0; /* 粘性定位元素相对于视口顶部的距离 */
background-color: yellow;
padding: 50px;
font-size: 20px;
}
</style>
</head>
<body>
<p>向下滚动此页面。</p>
<p>当你到达下面的代码块时，这个元素会变成粘性的。</p>
<div class="sticky">我是粘性定位的元素！</div>
<p>继续向下滚动，看看发生了什么。</p>
<p>尽量使用更多的文本，以便看到效果。</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<
评论已关闭