CSS 劃動置頂 div
在網頁設計中，有時需要讓某個 div 元素在滾動頁面時保持置頂的效果，以提供更好的用戶體驗。CSS 劃動置頂 div 是一種常見的實現方式。本文將詳細介紹如何使用 CSS 實現劃動置頂 div 的效果，并給出幾個代碼案例進行說明。
案例一：基本的劃動置頂 div
在這個案例中，我們將定義一個 div 元素，當頁面滾動時，該 div 在距離頂部一定距離時固定在頁面頂部。

html
<p>考慮以下示例：</p>
<pre>
<div class="header">
<h1>這是一個劃動置頂的 div</h1>
</div>
<br>
<!-- 頁面內容 -->
<div class="content">
<p>這里是頁面內容...</p>
</div>

要實現這個效果，我們可以使用 CSS 的 position 屬性來設置 div 固定到頁面頂部：

<style>
.header {
position: sticky;
top: 0;
background-color: grey;
padding: 20px;
color: white;
}
</style>

在上面的代碼中，我們將 .header 元素的 position 屬性設置為 sticky，并將 top 屬性設置為 0。這樣，當頁面滾動時，.header 元素將固定在頁面頂部。

案例二：劃動置頂菜單欄
在這個案例中，我們將創建一個劃動置頂的菜單欄，當頁面滾動時，菜單欄會保持在頁面頂部。
html

考慮以下示例：

<div class="menu">
<ul>
<li><a href="#home">首頁</a></li>
<li><a href="#about">關于我們</a></li>
<li><a href="#services">服務</a></li>
<li><a href="#contact">聯系我們</a></li>
</ul>
</div>
<br>
<!-- 頁面內容 -->
<div class="content">
<h2 id="home">首頁</h2>
<p>這里是首頁的內容...</p>
<br>
  <h2 id="about">關于我們</h2>
<p>這里是關于我們的內容...</p>
<br>
  <h2 id="services">服務</h2>
<p>這里是服務的內容...</p>
<br>
  <h2 id="contact">聯系我們</h2>
<p>這里是聯系我們的內容...</p>
</div>

要實現這個效果，我們可以使用 CSS 的 scroll-behavior 屬性來添加平滑滾動效果，并使用 position 和 top 屬性將菜單欄固定在頁面頂部：

<style>
.menu {
position: sticky;
top: 0;
background-color: grey;
padding: 20px;
color: white;
}
<br>
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
<br>
.menu li {
float: left;
}
<br>
.menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<br>
.menu li a:hover {
background-color: darkgrey;
}
<br>
.content {
scroll-behavior: smooth;
}
</style>

在上面的代碼中，我們將 .menu 元素的 position 屬性設置為 sticky，并將 top 屬性設置為 0，使菜單欄固定在頁面頂部。我們還使用了 scroll-behavior 屬性來添加頁面滾動的平滑效果。其他的 CSS 樣式用于美化菜單欄和頁面內容。

綜上所述，本文詳細介紹了如何使用 CSS 實現劃動置頂 div 的效果。我們通過兩個案例展示了如何設置 div 元素的 position 和 top 屬性，以及如何使用 scroll-behavior 屬性來創建劃動置頂的效果。通過合理運用這些 CSS 技巧，我們可以為用戶提供更好的瀏覽體驗，使網頁更加吸引人。