javascript - 想要在固定 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

请参阅此工作演示。

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

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