如何防止固定对象重叠页脚？

修复页脚处的固定对象

固定对象在页脚上滚动的常见问题有一个简单的解决方案。例如，让我们考虑屏幕左下角的固定“共享”框。为了防止它与页脚重叠，我们将其停在页脚上方约 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中文网其他相关文章！