sticky list item

CSS粘性定位示例

最新推荐文章于 2025-06-29 01:24:00 发布

转载最新推荐文章于 2025-06-29 01:24:00 发布 · 82 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5aea775cf265da0ba17c55dc

本文介绍了一个使用CSS实现的粘性定位效果示例。该示例演示了如何让元素在滚动到特定位置时固定在视口顶部。适用于Firefox、Safari及Chrome Canary等现代浏览器。

滚动到某一个具体的目录下时，目录就会定位在左上角。

代码：

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style type="text/css">
			* {
				box-sizing: border-box;
			}
			
			body {
				font: bold 18px/21px Helvetica, Arial, sans-serif;
			}
			
			p {
				font-weight: normal;
				background: #FFF59D;
				padding: .8em;
			}
			
			a {
				color: #07c;
			}
			
			dl {
				margin: 0;
				padding: 24px 0 0 0;
			}
			
			dt {
				background: #B8C1C8;
				border-bottom: 1px solid #989EA4;
				border-top: 1px solid #717D85;
				color: #FFF;
				margin: 0;
				padding: 2px 0 0 12px;
				position: -webkit-sticky;
				position: sticky;
				top: -1px;
			}
			
			dd {
				font: bold 20px/45px Helvetica, Arial, sans-serif;
				margin: 0;
				padding: 0 0 0 12px;
				white-space: nowrap;
			}
			
			dd + dd {
				border-top: 1px solid #CCC
			}
		</style>
	</head>

	<body>
		<p>
			This is the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning" target="_blank">demo from MDN</a>. CSS <code>position: sticky</code> is supported in Firefox, Safari, and Chrome Canary (56+).
		</p>
		<hr />
		<div>
			<dl>
				<dt>A</dt>
				<dd>Andrew W.K.</dd>
				<dd>Apparat</dd>
				<dd>Arcade Fire</dd>
				<dd>At The Drive-In</dd>
				<dd>Aziz Ansari</dd>
			</dl>
			<dl>
				<dt>C</dt>
				<dd>Chromeo</dd>
				<dd>Common</dd>
				<dd>Converge</dd>
				<dd>Crystal Castles</dd>
				<dd>Cursive</dd>
			</dl>
			<dl>
				<dt>E</dt>
				<dd>Explosions In The Sky</dd>
			</dl>
			<dl>
				<dt>T</dt>
				<dd>Ted Leo & The Pharmacists</dd>
				<dd>T-Pain</dd>
				<dd>Thrice</dd>
				<dd>TV On The Radio</dd>
				<dd>Two Gallants</dd>
			</dl>
		</div>
	</body>

</html>
复制代码