代码之家 › 专栏 › 技术社区 › Maharkus zok

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

css html jquery javascript

Maharkus zok · 技术社区 · 6 年前

我有两个固定元素,其中一个可以有 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解决方案很好

3 回复 | 直到 6 年前

jsadev.net 6 年前

这可以做到添加一个'顶'与高度的第一个导航到第二个,就像我在这里做的。

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