将一个固定元素放置在另一个固定元素下方答案

【问题标题】：Position a fixed element below another fixed element将一个固定元素放置在另一个固定元素下方
【发布时间】：2018-08-31 10:24:48
【问题描述】：

我有两个固定元素，其中一个可以有 display: block 或 display: none。另一个固定元素总是可见的。我希望元素贴在网站顶部，同时不让它们相互重叠。

我发现的唯一建议解决方案是以下问题：

How to position a fixed div under another fixed div?

Fixed element below fixed element without JS

将您的两个 div 放入另一个容器 div 并将其设置为固定。

但是我不能这样做，因为这两个元素在代码中的不同位置，我无法更改。

这是一个演示我的问题的代码 sn-p：

nav,
.secondmenu {
  position: fixed;
  height: 120px;
  opacity: 1;
  top: 0;
  width: 100%;
  background: lightgrey;
}

.secondmenu {
  height: 50px;
  background: grey;
  opacity: 1;
  z-index: 2;
}

body {
  height: 1000px;
}

<div class="secondmenu">Might be there or not and overlays the other navigation</div>
<div>Some other stuff separating the two from each other with relative position</div>
<nav></nav>

我想要什么以及要记住的事情：

如果两个元素都可见，则应将它们固定在页面顶部，而一个位于另一个下方
如果只有第二个元素可见，我希望将第二个元素固定在页面顶部
第一个元素可以使用内联样式更改其可见性（display:none display:block，即使不重新加载网站）
Javascript/Jquery 解决方案很好

【问题讨论】：

如果元素实际上是 DOM 中的同级元素，并且第一个元素的显示由诸如通过 JavaScript 动态设置/删除的类之类的东西切换，那么其余的可以单独在 CSS 中处理，使用通用兄弟组合~
@misorude 遗憾的是，第一个元素的显示是通过内联样式切换的。不过这是个好主意！

标签： javascript jquery html css

【解决方案1】：

这可以完成将第一个导航高度的“顶部”添加到第二个导航的高度，就像我在这里所做的那样。

注意：这不是完整的解决方案：如果您只想显示第二个导航，您可以使用 js 将“top”设置回 0。

nav,
.secondmenu {
  position: fixed;
  height: 120px;
  opacity: 1;
  top: 0;
  width: 100%;
  background: lightgrey;
}

.secondmenu {
  height: 50px;
  background: grey;
  opacity: 1;
  z-index: 2;
  top: 120px;
}

body {
  height: 1000px;
}

<div class="secondmenu">Might be there or not and overlays the other navigation</div>
<div>Some other stuff separating the two from each other with relative position</div>
<nav></nav>

【讨论】：

我的意思是，我原本打算将第二个菜单放在顶部，但我忘记在问题中指定这一点，并将其放在第一个菜单下方也可以。所以我想这是正确的解决方案。谢谢:)

【解决方案2】：

为它们创建一个持有者是正确的方法。但在您的情况下，您可以将它们都定位为 fixed。当另一个被隐藏或显示时，您可以通过 Javascript 处理两个元素样式（即顶部和左侧属性）

尝试如下

【讨论】：

【解决方案3】：

你试过 Sticky Kit 吗？ http://leafo.net/sticky-kit/

Sticky-kit 提供了一种在用户滚动时将元素附加到页面的简单方法，从而使元素始终可见。

【讨论】：