div 固定 滑動，是指在網頁中使用<div>元素進行布局，并通過CSS樣式實現該div元素固定在頁面上，并能夠隨鼠標滾動而滑動的效果。這種布局常用于實現網頁導航欄、側邊欄等固定在頁面上的元素，提高網頁的用戶體驗和可視性。

下面將通過幾個代碼案例詳細解釋說明div固定滑動：

案例一：

<style>
.fixed-div {
position: fixed;
top: 0;
height: 50px;
width: 100%;
background-color: #f1f1f1;
}
</style>
<br>
<div class="fixed-div">
<p>固定在頁面頂部的導航欄</p>
</div>
<br>
<p>頁面其他內容</p>

在上述代碼中，通過CSS樣式設置了一個名為fixed-div的類，將div元素的position屬性設置為fixed，top屬性設置為0，即固定在頁面頂部。同時，設置了固定div的高度為50像素，寬度為100%（即占滿整個頁面寬度），并設置背景顏色為#f1f1f1。在div元素內部，可以添加任意內容，例如導航欄的鏈接、Logo等。

案例二：

<style>
.scroll-div {
position: fixed;
top: 100px;
height: 300px;
width: 200px;
background-color: #f1f1f1;
overflow-y: scroll;
}
</style>
<br>
<div class="scroll-div">
<p>可以滑動的側邊欄</p>
</div>
<br>
<p>頁面其他內容</p>

在上述代碼中，通過CSS樣式設置了一個名為scroll-div的類，將div元素的position屬性設置為fixed，top屬性設置為100像素，即距離頁面頂部100像素的位置。同時，設置了滑動div的高度為300像素，寬度為200像素，并設置背景顏色為#f1f1f1。通過設置overflow-y屬性為scroll，實現了垂直方向上的滾動條。可以在div元素內添加需要滑動的內容，例如網頁中的側邊欄。

案例三：

<style>
.sticky-div {
position: -webkit-sticky;
position: sticky;
top: 50px;
height: 200px;
width: 100px;
background-color: #f1f1f1;
margin-left: 200px;
}
</style>
<br>
<p>頁面內容</p>
<br>
<div class="sticky-div">
<p>固定在右側的信息欄</p>
</div>

在上述代碼中，通過CSS樣式設置了一個名為sticky-div的類。通過設置position屬性為-sticky，可以兼容不同瀏覽器，實現div元素固定到頁面上。top屬性設置為50像素，使div元素距離頁面頂部50像素的位置。同時，設置了固定div的高度為200像素，寬度為100像素，并設置背景顏色為#f1f1f1。通過設置margin-left屬性為200像素，將div元素向右移動200像素。這種布局常用于網頁的信息欄等需要固定在頁面右側的元素。

通過以上案例的代碼和說明，我們可以實現div固定滑動的效果，提高網頁的用戶體驗和可視性。在實際的網頁開發中，可以根據具體需求和設計，調整CSS樣式和內容布局，達到更好的效果。