<div>吸附效果是一種通過CSS和JavaScript實現(xiàn)的網(wǎng)頁元素交互特效。它可以使元素在滾動或鼠標懸停時固定在屏幕上的特定位置，達到頁面固定展示的效果。它在網(wǎng)頁設(shè)計中被廣泛運用，可以使頁面更加動態(tài)和吸引人。</div>

下面我們來看幾個使用div吸附效果的代碼案例：

<div> 
<p class="position-absolute">這是一個使用div吸附效果的例子，當(dāng)鼠標滾動時，元素會固定在屏幕上方。
頁面內(nèi)容會在元素下方滾動，而元素本身保持不動。</p>
</div>
<br>
<style>
.position-absolute {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: #f1f1f1;
padding: 20px;
}
</style>
<br>
<script>
window.addEventListener('scroll', function() {
var divElement = document.querySelector('.position-absolute');
divElement.style.top = window.scrollY + 'px';
});
</script>

在上面的代碼案例中，我們使用了CSS的position屬性將元素設(shè)置為絕對定位（absolute），然后通過JavaScript監(jiān)聽頁面的滾動事件（scroll），每次滾動時將元素的top屬性值設(shè)置為當(dāng)前滾動的距離（window.scrollY），實現(xiàn)了元素在滾動時吸附在屏幕上方的效果。

<div id="sticky-div"> 
<p>這是另一個使用div吸附效果的例子，當(dāng)鼠標懸停在元素上方時，元素會固定在屏幕上方。</p>
</div>
<br>
<style>
#sticky-div {
width: 200px;
background-color: #f1f1f1;
padding: 20px;
}
<br>
.sticky {
position: fixed;
top: 0;
width: 200px;
background-color: #f1f1f1;
padding: 20px;
}
</style>
<br>
<script>
var divElement = document.getElementById('sticky-div');
divElement.addEventListener('mouseover', function() {
divElement.classList.add('sticky');
});
<br>
divElement.addEventListener('mouseout', function() {
divElement.classList.remove('sticky');
});
</script>

在上面的代碼案例中，我們給元素設(shè)置了一個id（sticky-div），并使用JavaScript監(jiān)聽鼠標懸停事件（mouseover和mouseout）。當(dāng)鼠標懸停在元素上時，通過添加一個特定的CSS類（sticky）使元素的position屬性設(shè)置為固定定位（fixed），實現(xiàn)了元素在懸停時吸附在屏幕上方的效果。

以上是兩個使用div吸附效果的代碼案例，通過使用CSS和JavaScript的組合，我們可以根據(jù)需求實現(xiàn)不同的吸附效果，使網(wǎng)頁更加生動和吸引人。