一、需求
要讓左側邊欄固定，並且不會隨着頁面的滾動向上滾動，側邊欄內容如果超出，可以顯示滾動條
二、實現原理
設置佈局：position: fixed
設置overflow-y: scroll
三、效果圖：
四、實現代碼
<!DOCTYPE HTML>
<html>
<header>
<title>layout test</title>
</header>
<body>
<style>
body {
margin:0px;
padding:0px;
}
.topNav {
position: fixed;
width: 100%;
height:56px;
background-color: green;
top: 0px;
left: 0px;
}
.leftNav {
position: fixed;
height: 100%;
width: 200px;
background: pink;
left: 0px;
overflow-y: scroll;
}
.content {
padding-left:200px;
background: yellow;
min-height:768px;
margin-top:56px;
}
h1 {
margin:0px;
}
</style>
<div class="topNav"></div>
<div class="leftNav">
<p style="height:80px;background:gray;text-align:center;margin:0px;">test1</p>
<p style="height:80px;text-align:center;margin:0px;">test2</p>
<p style="height:80px;background:gray;text-align:center;margin:0px;">test3</p>
<p style="height:80px;text-align:center;margin:0px;">test4</p>
<p style="height:80px;background:gray;text-align:center;margin:0px;">test5</p>
<p style="height:80px;text-align:center;margin:0px;">test6</p>
<p style="height:80px;background:gray;text-align:center;margin:0px;">test7</p>
<p style="height:80px;text-align:center;margin:0px;">test8</p>
<p style="height:80px;background:gray;text-align:center;margin:0px;">test9</p>
<p style="height:80px;text-align:center;margin:0px;">test10</p>
<p style="height:80px;background:gray;text-align:center;margin:0px;">test11</p>
<p style="height:80px;text-align:center;margin:0px;">test12</p>
<p style="height:80px;background:gray;text-align:center;margin:0px;">test13</p>
<p style="height:80px;text-align:center;margin:0px;">test14</p>
<p style="height:80px;background:gray;text-align:center;margin:0px;">test15</p>
<p style="height:80px;text-align:center;margin:0px;">test16</p>
<p style="height:80px;background:gray;text-align:center;margin:0px;">test17</p>
<p style="height:80px;text-align:center;margin:0px;">test18</p>
</div>
<div class="content">
<h1>這是一條測試內容啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或</h1>
<h1>這是一條測試內容</h1>
<h1>這是一條測試內容</h1>
<h1>這是一條測試內容</h1>
<h1>這是一條測試內容</h1>
<h1>這是一條測試內容</h1>
<h1>這是一條測試內容</h1>
<h1>這是一條測試內容</h1>
<h1>這是一條測試內容</h1>
<h1>這是一條測試內容</h1>
<h1>這是一條測試內容</h1>
<h1>這是一條測試內容</h1>
<h1>這是一條測試內容</h1>
<h1>這是一條測試內容</h1>
<h1>這是一條測試內容</h1>
<h1>這是一條測試內容</h1>
</div>
</body>
</html>