粘div固定位置

Question

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

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

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

Answer 1

这.left-col{ height:500px;}可以解决您的问题吗？

Answer 2

请参阅this fiddle。

三个关键提示：

1. 将“左脚”放在另一个父级，然后放入菜单内容（称为“left-col-top”）。
2. “left-col-top”应该是透明的，“position：fixed”，“z-index：1”，最小高度比菜单高。
3. “左脚”应该是“位置：绝对。”

Answer 3

查看屏幕1.1，如果黄色框中有第11个列表，它肯定会落后于绿色框。 （还要考虑浏览器中的工具栏/菜单栏）。您可能必须使用“更多链接＆gt;”之类的内容如果屏幕高度较小。

屏幕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
  }
});