sticky div固定位置

Question

这是我的html工作。 http://jsfiddle.net/awaises/remqf/4/

我想将固定的div框推到屏幕的底部。但是它在左侧导航和导航的最后一个项目被隐藏在绿色框后面重叠。我们可以按照以下设计修复绿色盒子吗？但是我们必须确保绿色框必须位于屏幕的底部，即使窗口的分辨率很小或很大。

设计布局URL http://www.thewebmakerz.com/screen.jpg

Answer 1

这是否.left-col{ height:500px;}解决问题了吗？

Answer 2

请参阅this fiddle。

三个关键提示：

1. 看跌“左尺”，在不同的父那么你的菜单内容（称为“左山坳顶”）。
2. “left-col-top”应该是透明的，“position：fixed”，“z-index：1”和高于菜单的最小高度。
3. “左脚”应该是“位置：绝对的”。

Answer 3

看着屏幕1.1，如果在黄色盒子11日列表，它肯定会去后面的绿色框。 （也可以考虑浏览器中的工具栏/菜单栏）。如果屏幕高度较小，您可能不得不使用“更多链接”之类的内容。

屏幕1.2及以后： 如果jQuery是一个选项，你可以使用scrollTop的功能。 最初，让绿盒固定在位置：固定，底部有一些保证金负数。 然后，当用户滚动到一个特定的量（如见于屏幕1.2）尝试以下jQuery代码：

var yellowBoxHeight = $("div.yellow-box").height(); 
$document.scroll(function() { 
    if ($document.scrollTop() >= yellowBoxHeight - 100) { 
    // If user has scrolled some amount, eg. 100 pixels of yellow box is still visible 
    // make the green box animate & let it come upwards 
    } else { 
    // put the green-box back with some negative margin into the bottom 
    } 
});