使用位置：固定时，防止元素显示在页脚顶部 [英] Preventing element from displaying on top of footer when using position:fixed

问题描述

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

I'd like to use the CSS property position:fixed to fix the position of an element but at the same time prevent the element from being positioned over my footer when the user scrolls to the bottom of the page. Is there a way of stopping an element from showing over a footer in this way?

推荐答案

如果你希望元素有时被修复而不是其他的，你需要使用JavaScript来添加/ $ c> position：fixed

If you want the element to be fixed sometimes but not others you will need to use JavaScript to add/remove position:fixed

首先设置没有的元素position：fixed

然后设置一个css类，当添加到元素时，它会固定其位置，例如：

Then set a css class that when added to the element fixes its position, something like:

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

以下代码使用jquery，检测页面上的滚动位置， /删除固定类：

The following code uses jquery, detects the scroll position on the page, and adds/removes the fixed class accordingly:

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

这篇关于使用位置：固定时，防止元素显示在页脚顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！