Question

我试图让我的侧边栏（高度超过100％）在底部到达页面底部时固定。

css：

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

HTML：

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

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

谢谢！

Answer 1

例如，您可以使用html高度并减去窗口高度。

用jQuery编写：

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

这将为您提供滚动值，此时不再需要滚动。从该值中，您可以减去边距/底部/高度或您放置侧边栏的其他方式。

Answer 2

将最大高度设置为100％并将其父级（可能是html，body）设置为height：100％;

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

http://jsfiddle.net/Pg5rp/

Answer 3

我不确定我是否理解你的问题，但是如果你想设置位置：当到达底部时固定到#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/

当div的底部到达页面底部时

3 个答案: