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

debugcn 发表于 Dev

马哈库斯

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

我发现的唯一建议的解决方案是在这些问题中：

如何将固定 div 定位在另一个固定 div 下？

固定元素下方没有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 解决方案很好

J·萨迪

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

注意：这不是完整的解决方案：如果您只想显示第二个导航，您可以使用 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。