使用css position:sticky实现滚动时固定头部、侧边导航固定

结构

	<div class="header">
		网站
	</div>
	<div class="sider">
		<div class="item">链接1</div>
		<div class="item">链接2</div>
		<div class="item">链接3</div>
		<div class="item">链接4</div>
		<div class="item">链接5</div>
		<div class="item">链接6</div>
	</div>

样式

	<style>
		body {
			height: 200vh;
		}

		.header {
			line-height: 50px;
			padding: 0 20px;
			background-color: #f00;
			color: #fff;
			position: sticky;
			top: 8px;
		}

		.sider {
			width: 200px;
			padding: 20px;
			margin-top: 20px;
			background-color: #d7d7d7;
			border-radius: 15px;
			position: sticky;
			top: 78px;
		}
	</style>

效果

滚动时头部和侧边导航固定不动