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

我试图让我的侧边栏（它的高度超过100％）在底部到达页面底部时被修复。当div的底部到达页面的底部

的CSS：

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

的HTML：

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

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

谢谢！

来源

2014-02-18 user3052619

如果高度更多的则是100％，你怎么能到达底部时，你已经在底部？ –

我的意思是当侧栏的底部在窗口底部可见时，而不是文档。不知道你是否理解我.. – user3052619

所以当你向下滚动到页面底部时，你想改变侧边栏'display：fixed'？我不确定我是否正确理解你。试着更具体一点，请给我们提供一些更多的代码或者一个小提琴，这样你就可以为你的问题找到某种解决方案 –

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

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

http://jsfiddle.net/Pg5rp/

来源

2014-02-18 20:01:19 Tony

你拿例如HTML高度减去窗口的高度。

写在jQuery的：

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

这会给你的滚动值，当没有更多的时间可以滚动。从这个值你可以减去边距/底部/高度或其他方式来定位你的侧边栏。

来源

2014-02-18 20:03:56 drip

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

来源

2014-02-18 20:14:39 NoSense

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

回答

相关问题