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

时间:2014-04-18 09:25:47

标签: jquery css position fixed

我在

创造了一个小提琴

fiddle Link

我想要的只是向下滚动DIV#sticker FIXED,直到其底部边框(我的示例中的底部红色边框)到达浏览器窗口的底部。我怎么能这样做?

提前致谢!

1 个答案:

答案 0 :(得分: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/的全屏版本看到小提琴