如何使用 jQuery 防止固定物件與頁尾重疊？

避免固定物件與頁腳重疊

許多 Web 開發人員都會遇到固定物件在頁腳上捲動的問題。這對於共享框、導航選單或社交媒體小工具等元素尤其常見。為了防止這種重疊，可以使用 jQuery 實作一個簡單的解決方案。

考慮以下HTML 結構：

<div>

和CSS：

#social-float {
    position: fixed;
    bottom: 10px;
    left: 10px;
    /* Other styles... */
}

以確保共享框保持固定，除非它到達頁腳，使用jQuery 來監視其在滾動上的位置：

$(document).scroll(function() {
    checkOffset();
});

function checkOffset() {
    if ($('#social-float').offset().top + $('#social-float').height() 
                                          >= $('#footer').offset().top - 10) {
        $('#social-float').css('position', 'absolute');
    } else if ($(document).scrollTop() + window.innerHeight < $('#footer').offset().top) {
        $('#social-float').css('position', 'fixed');
    }
}

此解決方案計算共享框和頁腳之間的距離，如果在10px 以內，則它將框的位置變更為絕對位置。向上滾動時，它會恢復固定位置。

請記住將 #social-float 的父元素作為頁腳的同級元素，以便此解決方案有效運作。祝您好運在您的網站上實施此修復！

以上是如何使用 jQuery 防止固定物件與頁尾重疊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！