html - 使用位置 :fixed 时防止元素显示在页脚顶部

Question

我想使用CSS属性position:fixed来固定元素的位置，但同时防止当用户滚动到页面底部时该元素位于我的页脚上方。有没有办法阻止元素以这种方式显示在页脚上？

Answer 1

如果您希望元素有时固定，但其他时候不固定，则需要使用 JavaScript 来添加/删除 position:fixed

首先设置不带 position:fixed 的元素，以便它出现在页脚上方的页面中，一旦滚动到底部，您希望它出现在该位置。

然后设置一个 css 类，当添加到元素时固定其位置，如下所示:

div#sometimesfixed.fixed
{
    position:fixed;
    bottom: 0px;
}

以下代码使用 jquery，检测页面上的滚动位置，并相应地添加/删除 fixed 类:

$(window).scroll(function (event) {
    var windowTop = $(this).scrollTop();        
    if (windowTop >= $("#footer").offset().top) {
        $("div#sometimesfixed").addClass("fixed");
    } else {
        $("div#sometimesfixed").removeClass("fixed");
    }
});