想要在固定div的底部到达页脚div的顶部时更改CSS

Question

我有一个固定的位置div，当它到达页脚的顶部时，我想变成绝对定位，所以基本上它看起来就像div击中页脚时停止。

CSS

#body {
    width:100%;
    height:800px;
    position:relative;
}
#footer {
    width:100%;
    height:500px;
    background-color:yellow;
    float:left;
    position:relative;
}
#arrow {
    position:fixed;
    width:20px;
    height:80px;
    background-color:black;
    top:160px;
    left:0;
    right:0;
    margin:0 auto;
    z-index:1000;
}

的JavaScript

function scroll_style() {
    var window_top = $('#arrow').offset().top;
    var div_top = $('#footer').offset().top;

    if (window_top > div_top) {
        $('#arrow').css({position:'absolute',bottom:0,top:"auto"});
    }
}
$(function() {
    $(window).scroll(scroll_style);
    scroll_style();
});

这是jsfiddle http://jsfiddle.net/be2Ff/1/。当#arrow的顶部到达#footer的顶部但是当#arrow的底部到达页脚时我需要它改变它。有什么想法吗？

Answer 1

你忘了考虑箭头的高度。只需添加：

var window_top = $('#arrow').offset().top + $('#arrow').height();

到你的功能。

Answer 2

See this working demo.

您需要做的就是将#arrow的高度添加到其位置。此时，您可能希望首先缓存箭头的jQuery对象。

var $arrow = $('#arrow'),
    window_top = $arrow.offset().top + $arrow.outerHeight(),
    div_top = $('#footer').offset().top;