当 div 底部到达页面底部时答案

【问题标题】：When the bottom of a div reaches the bottom of the page当 div 底部到达页面底部时
【发布时间】：2014-02-18 19:51:16
【问题描述】：

我正在尝试让我的侧边栏（其高度超过 100%）在其底部到达页面底部时被固定。

CSS：

#sidebar { background: red; height: auto; padding: 30px; }

HTML：

<div id="sidebar"> ... </div>

我认为 jQuery 是解决方案，但我不知道如何实现。

谢谢！

【问题讨论】：

如果高度超过100%，你已经在底部了，你怎么能到达底部？
我的意思是当侧边栏底部可见时，它在窗口底部可见，而不是文档。不知道你是否理解我..
所以您想在向下滚动到页面底部时更改边栏display:fixed？我不确定我是否理解正确。尝试更具体一些，请为我们提供更多代码或小提琴，以便您实际上可以为您的问题找到某种解决方案

标签： jquery css

【解决方案1】：

以 html 高度为例，减去窗口高度。

用 jQuery 编写：

var bottomScroll = $('html').height() - $(window).height();

当没有更多可滚动时，这将为您提供滚动值。您可以从该值中减去边距/底部/高度或其他定位侧边栏的方式。

【讨论】：

【解决方案2】：

将最大高度设置为 100%，并将其父级（可能是 html、body）设置为 height:100%；

html, body{
    height:100%;
}
#sidebar{
    max-height:100%;
    width:200px;
    border:1px solid black;
}

http://jsfiddle.net/Pg5rp/

【讨论】：

【解决方案3】：

我不确定我是否理解您的问题，但是如果您想设置 position:fixed 到底部时的#sidebar（我不知道其背后的逻辑），这个脚本应该可以解决问题：

$(function(){
  $(window).scroll(function(){
    if( $(window).scrollTop() + $(window).height() == $(document).height()) {
        $("#sidebar").css({
            "position": "fixed",
        });
        alert("the sidebar is fixed!");
    }
  });  
});

现场示例 - http://jsfiddle.net/Kg7cz/1/

【讨论】：