案例一：使用position屬性固定<div>位置
最常見的一種方法是使用CSS的position屬性來實現<div>的上下固定。通過將<div>的position屬性設置為fixed，可以將其位置固定在頁面的上方或下方，不隨頁面滾動而改變。
<style>
#navbar {
position: fixed;
top: 0;
}
#footer {
position: fixed;
bottom: 0;
}
</style>
<body>
<div id="navbar">
<!-- 導航欄內容 -->
</div>
<!-- 頁面主體內容 -->
<div id="footer">
<!-- 頁腳內容 -->
</div>
</body>在上述代碼中，<div>標簽分別被賦予了id為navbar和footer。CSS中通過設置navbar的position為fixed，并將top屬性設置為0，使得導航欄始終固定在頁面的上方；通過設置footer的position為fixed，并將bottom屬性設置為0，使得頁腳始終固定在頁面的下方。這樣，在頁面滾動時，<div>標簽仍然保持在固定的位置。
案例二：使用JavaScript動態固定<div>位置
除了使用CSS的position屬性，還可以使用JavaScript來實現<div>的上下固定。通過監聽頁面的滾動事件，根據滾動位置動態改變<div>的位置。
<style>
.navbar {
/* 導航欄的樣式 */
}
.footer {
/* 頁腳的樣式 */
}
.sticky {
position: fixed;
top: 0;
}
</style>
<body>
<div class="navbar">
<!-- 導航欄內容 -->
</div>
<!-- 頁面主體內容 -->
<div class="footer">
<!-- 頁腳內容 -->
</div>
<br>
<script>
window.onscroll = function() {
var navbar = document.getElementsByClassName("navbar")[0];
var footer = document.getElementsByClassName("footer")[0];
<br>
if (window.pageYOffset >= navbar.offsetTop) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
<br>
if (window.pageYOffset >= footer.offsetTop - window.innerHeight) {
footer.classList.add("sticky");
} else {
footer.classList.remove("sticky");
}
};
</script>
</body>在上述代碼中，<div>標簽分別賦予了類名為navbar和footer，并在CSS中分別定義了它們的樣式。JavaScript部分通過window.onscroll事件監聽頁面的滾動，根據滾動位置判斷是否需要添加類名sticky，并通過CSS中定義的sticky樣式進行固定（top: 0）。其中，navbar.offsetTop返回導航欄距離頁面頂部的垂直偏移量，footer.offsetTop返回頁腳距離頁面頂部的垂直偏移量，window.pageYOffset表示頁面在垂直方向上滾動的距離，window.innerHeight返回窗口的視口高度。
通過這兩個案例的代碼示例，我們可以看到，<div>的上下固定可以通過CSS的position屬性，也可以通過JavaScript的動態添加和移除類名來實現。具體使用哪種方法取決于需求和個人偏好。
：<div>上下固定是一種常見的布局技術，可以通過CSS的position屬性或JavaScript的動態添加和移除類名來實現。通過固定<div>的位置，可以使其始終保持在頁面的上方或下方，不受頁面滾動的影響。這種技術在實現導航欄、廣告欄等需要常駐在頁面可視區域的元素時十分有用。