CSS 固定/绝对定位 <div>

Question

如何放置一个 div position: fixed; bottom: 0; 直到滚动到达页脚，然后是 position: absolute; bottom: 0; 内容 div.

我希望 div 始终贴在视口(viewport)的底部，然后贴在内容 div 的底部，而不是盖住我的页脚。

compass/sass 解决方案的奖励积分!

Answer 1

在this fiddle (我用你的作为基础，尽管它是 fork 的)你可以看到一个你想要的工作示例，假定页脚高度为 100 像素。

这是需要的 JS:

$(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
        $('div#scrolled').css({'bottom' : '100px'});
    } else {
        $('div#scrolled').css({'bottom' : '0px'});
    }
});

它在滚动时检查滚动是否到达底部加上 100 像素，如果是，它将固定元素的底部设置为 100 像素。不好的一点是它不是渐进的，当页脚出现时固定元素跳转。如果您希望页脚在用户到达绝对底部时弹出，则不能只删除 if 语句中的 100 : if ($(window).scrollTop() + $(window).height() >= $ (文档).height()) { ...

更新:

Here是上述代码的“渐进式”版本。

$(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
        var bottom = 100 - ($(document).height() - ($(window).scrollTop() + $(window).height())) + "px";
        $('div#scrolled').css({'bottom' : bottom});
    } else {
        $('div#scrolled').css({'bottom' : '0px'});
    }
});

现在，当用户滚动距离底部不到 101px 时，不再将底部更改为 100px，而是根据滚动计算固定元素应具有的位置

希望对您有所帮助!