html - 粘性div固定位置

Question

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

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

设计版面网址 http://www.thewebmakerz.com/screen.jpg

Answer 1

看到这个小提琴。

三个关键提示：

1. 将“left-footer”放在与菜单内容不同的父级中（称为“left-col-top”）。
2. “left-col-top”应该是透明的，“position:fixed”，“z-index:1”和一个比你的菜单高的最小高度。
3. “左页脚”应该是“位置：绝对”。

Answer 2

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

屏幕 1.2 及以后版本：如果 jQuery 是一个选项，您可以使用 scrollTop 函数。最初，用 position:fixed 和底部的一些负边距来固定绿框。然后，当用户滚动到特定数量时（如屏幕 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
  }
});

Answer 3

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