sticky list item

Cassie1492949236626發表於2018-05-03

滾動到某一個具體的目錄下時，目錄就會定位在左上角。

sticky list item

程式碼：

<!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>
複製程式碼

相關文章