Question

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

Answer 1

只要定位了所有元素（绝对或相对），您就可以使用z-index属性。默认值为0，因此请为页脚提供更高的值，它将显示在其他内容上方。

Answer 2

如果您希望有时修复该元素而不修复其他元素，则需要使用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");
    }
});

Answer 3

在页脚中添加一些额外的margin-bottom，以便用户可以滚动一下底部，以便您的页脚可以清除固定元素。

Answer 4

我最近遇到了同样的问题。您可以使用jQuery利用元素的position属性来实现解决方案，在默认值（static divs），fixed和absolute之间切换。您还需要一个容器元素作为固定元素。最后，为了防止固定元素越过页脚，此容器元素不能是页脚的父元素。

javascript部分涉及计算固定元素与文档顶部之间的像素距离，并将其与滚动条相对于窗口对象的当前垂直位置（即上面隐藏的像素数）进行比较每次用户滚动页面时，页面的可见区域。当向下滚动时，固定元素即将消失，我们将其位置更改为固定并粘贴在页面顶部。

当我们滚动到底部时，这会导致固定元素越过页脚，特别是如果浏览器窗口很小。因此，我们将从文档顶部计算页脚的像素距离，并将其与固定元素的高度加上滚动条的垂直位置进行比较：当固定元素即将越过页脚时，我们将将其位置更改为绝对位置并粘贴在底部，就在页脚上方。

这是一个通用的例子。

HTML结构：

<div id="content">
    <div id="leftcolumn">
        <div class="fixed-element">
            This is fixed 
        </div>
    </div>
    <div id="rightcolumn">Main content here</div>
    <div id="footer"> The footer </div>
</div>

CSS：

#leftcolumn {
    position: relative;
}
.fixed-element {
    width: 180px;
}
.fixed-element.fixed {
    position: fixed;
    top: 20px;
}
.fixed-element.bottom {
    position: absolute;
    bottom: 356px; /* Height of the footer element, plus some extra pixels if needed */
}

JS：

// Position of fixed element from top of the document
var fixedElementOffset = $('.fixed-element').offset().top;
// Position of footer element from top of the document.
// You can add extra distance from the bottom if needed,
// must match with the bottom property in CSS
var footerOffset = $('#footer').offset().top - 36;

var fixedElementHeight = $('.fixed-element').height(); 

// Check every time the user scrolls
$(window).scroll(function (event) {

    // Y position of the vertical scrollbar
    var y = $(this).scrollTop();

    if ( y >= fixedElementOffset && ( y + fixedElementHeight ) < footerOffset ) {
        $('.fixed-element').addClass('fixed');
        $('.fixed-element').removeClass('bottom');          
    }
    else if ( y >= fixedElementOffset && ( y + fixedElementHeight ) >= footerOffset ) {
        $('.fixed-element').removeClass('fixed');           
        $('.fixed-element').addClass('bottom');
    }
    else {
        $('.fixed-element').removeClass('fixed bottom');
    }

 });

使用position：fixed时，防止元素显示在页脚顶部

4 个答案: