Question

<div class="header__secondary" style="height:40px; background-color:green">
nav1
</div>

<div class="header header--layout-2" style="position: sticky; top: 0; height:40px; background-color:red">
nav2
</div>

<div class="header header--layout-2" style="position: fixed; height:40px; margin-top:20px; background-color:yellow">
elm
</div>

<br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br>
<br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br></br>

如何使黄色的elm与nav2保持固定的距离？问题在于，如果您向下滚动nav2和elm之间的距离，则由于nav1

Answer 1

不确定我是否正确理解您的需求...但是，如果我知道，应该是这样的：

<div class="header__secondary" style="height:40px; background-color:green">
nav1
</div>

<div class="header header--layout-2" style="position: sticky; top: 0; height:40px; background-color:red">
nav2
</div>

<div class="header header--layout-2" style="position: sticky; top: 45px; margin-top: 5px; height: 40px; background-color:yellow">
elm
</div>

<br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br>
<br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br></br>

Answer 2

您可以使用绝对定位将榆树包裹在div2中。另外，为固定距离分配top属性。希望能帮助到你。

<div class="header__secondary" style="height:40px; background-color:green">
nav1
</div>
<div class="header header--layout-2" style="position: sticky; top: 0; height:40px; background-color:red">
nav2
<div class="header header--layout-2" style="position:absolute; height:40px;top:70px; background-color:yellow">
elm
</div>


</div>



<br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br>
<br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br></br>

滚动时如何在两个元素之间保持固定距离

2 个答案: