如何在向下滚动时使div固定在底部

Question

我在创建了一个小提琴

小提琴链接

我只想在向下滚动时使DIV#sticker FIXED位于底部，直到其底部边框（在我的示例中为底部红色边框）到达浏览器窗口的底部。我该怎么做？

提前感谢！

Answer 1

您只需要计算滚动偏移量+窗口高度，就可以得到窗口的底部，然后检查是否大于元素偏移量+元素高度。此外，如果您真的想将元素固定到下边框，则必须删除元素的下边距。

代码是这样的：

$(document).ready(function() {
    var s = $("#sticker");
    var pos = s.offset().top+s.height(); //offset that you need is actually the div's top offset + it's height
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop(); //current scroll position of the window
        var windowheight = $(window).height(); //window height
        if (windowpos+windowheight>pos) s.addClass('stick'); //Currently visible part of the window > greater than div offset + div height, add class
        else s.removeClass('stick');
    });
});

我已经编辑了你的html，所以你可以正确地看到它（添加了更多的滚动），但你可以在http://jsfiddle.net/2UGgc/33/或全屏版本http://jsfiddle.net/2UGgc/33/show/