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

【问题标题】：Want to change the CSS when the bottom of a fixed div reaches the top of the footer div想要在固定 div 的底部到达页脚 div 的顶部时更改 CSS
【发布时间】：2013-09-26 08:10:45
【问题描述】：

我有一个固定位置的 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 的底部到达页脚时我需要它进行更改。有什么想法吗？

【问题讨论】：

标签： javascript jquery css html

【解决方案1】：

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

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

到你的功能。

【讨论】：

【解决方案2】：

See this working demo.

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

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

【讨论】：