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

Question

我有两个固定的元素，其中之一可以具有 display: block或display: none。另一个固定元素将始终可见。我希望这些元素能够保持网站的顶部，而又不会彼此重叠。

我找到的唯一建议的解决方案是在以下问题中：

How to position a fixed div under another fixed div?

Fixed element below fixed element without JS

  

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

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

以下是演示我的问题的代码段：

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解决方案很好

Answer 1

就像我在这里所做的那样，这可以在第一个导航栏的高度上增加一个“顶部”。

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

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>

Answer 2

为他们两个创建一个持有人是正确的方法。 但是根据您的情况，您可以将两者定位为固定。 并且当另一个隐藏或显示时，您可以通过Javascript处理这两个元素的样式（即top和left属性）

尝试如下

Answer 3

您尝试过便利贴吗？ http://leafo.net/sticky-kit/

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