Javascript 将div粘贴到浏览器窗口的底部

我有一个div，我想粘贴到浏览器窗口的底部（实际的浏览器窗口，而不是页面）。当用户滚动时，div需要停留在浏览器窗口的底部

现在，div将在第一个初始滚动时粘在窗口底部，但不会在每次有新滚动时重新定位。以下是我的jQuery的内容：

$(window).scroll(function () { 
    var bHeight = $(window).height();
    $('.test').css({
        top: bHeight - 77 + 'px'
    });
});

---

下面是一个JSFIDLE

这可以简单地用CSS完成。删除所有JavaScript，然后执行以下操作：

position: fixed;
bottom: 77px;

---

您是否考虑过使用固定位置div？设置

位置：固定
和
底部：77px

但是，如果必须使用jQuery解决方案，请将代码更改为

$(window).scroll(function () { 
    var bHeight = $(window).height();
    var offset = $(window).scrollTop();
    $('.test').css({
        top: bHeight + offset - 77 + 'px'
    });
});


这将考虑到您已滚动的距离，并将在CSS中相应地设置div的位置使用
position:fixed而不是
位置：绝对

给你：


是否要使用
位置：固定

检查以下链接是否适用于您


这正是位置：fixed的设计目的：

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

这是小提琴：
哇，这种疏忽真令人尴尬！谢谢你的帮助哈哈。有时候我们太专注于使用先进的技术，以至于忘记了已经有一个基本的技术了。这也是我一直在使用的，但在移动设备上，它会在上下滚动时起作用。使用
position:sticky可能会产生更好的结果。对于CSS在默认情况下可以处理的事情，不应该使用jQuery或Javascript。对于html上粘性页脚类型的事情，目前为止的最佳解决方案。宽度：需要100%才能工作。
#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}