粘性div固定位置答案

【问题标题】：sticky div fixed position粘性div固定位置
【发布时间】：2017-12-10 14:00:41
【问题描述】：

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

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

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

【问题讨论】：

标签： html css css-position sticky

【解决方案1】：

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

【讨论】：

不，我无法修复 left-col 高度，因为左侧导航项将由管理员控制，并且可以在不久的将来添加更多项。

【解决方案2】：

见this fiddle。

三个关键提示：

将“left-footer”放在与菜单内容不同的父级中（称为“left-col-top”）。
“left-col-top”应该是透明的、“position:fixed”、“z-index:1”和一个比菜单高的最小高度。
“left-footer”应该是“position:absolute”。

【讨论】：

不，还是同样的问题。如果我在左列添加更多项目，它们会隐藏在绿色框后面。绿框仍然重叠:(

【解决方案3】：

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

【讨论】：