如何防止固定物件重疊頁尾？

修復頁腳處的固定物件

固定物件在頁腳上滾動的常見問題有一個簡單的解決方案。例如，讓我們考慮螢幕左下角的固定「共享」框。為了防止它與頁腳重疊，我們將其停在頁腳上方約 10px 處。

首先，我們需要在每次頁面滾動時確定框與頁腳的距離：

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

如果框離頁腳太近（即在10 像素內），我們會將其位置更改為絕對位置：

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

請注意，#social-float 的父級應該是HTML結構中頁腳的同級。

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