Question

如何在滚动到达页脚之前放置div position: fixed; bottom: 0;，然后是内容div的position: absolute; bottom: 0;。

我希望div始终粘贴在视口的底部，然后粘贴到内容div的底部，而不是掩盖我的页脚。

指南针/ sass解决方案的奖励积分！

Answer 1

坚持position:fixed，并将margin-bottom:100px（当您的div高度为100px时）添加到您的页脚，以便该div不会掩盖您的页脚。

另一种选择（不推荐）会涉及JavaScript，检测是否scrollHeight == scrollTop + offsetHeight。

Answer 2

在this fiddle（我用你的作为基础，虽然分叉），你可以看到你想要的一个工作示例，假设的页脚高度为100px。

这是JS所需要的：

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

在滚动时检查滚动是否到达底部加上100像素，如果是，则将固定元素的底部设置为100px。不好的一点是，它不是渐进的，当页脚出现时固定元素会跳跃。如果您希望在用户到达绝对底部时弹出页脚，则只能删除if语句中的100：if ($(window).scrollTop() + $(window).height() >= $(document).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，而是根据滚动计算固定元素应具有的位置

希望它有所帮助！

CSS固定/绝对定位<div> </div>

2 个答案: