粘性位置相互重叠的多个 div

Question

当我有多个 div 的粘性位置时，第一个 div 与第二个 div 重叠，而在最后并且不会锁定在没有重叠的位置。当它结束相应的 div

时如何让它锁定在一个位置

这是一个 copepen

HTML :

<main class="main-container">
  <header class="main-header">HEADER</header>
  <div class="main-header">MAIN CONTENT</div>
  <footer class="main-footer">FOOTER</footer>
</main>

CSS

body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; }
.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
  height:50px; background:#aaa; border-color:red;
}
.main-content{
  min-height:1000px;
}

.main-header{position:-webkit-sticky; position:sticky; top:0;}

Codepen

网站中的原始问题

https://ibb.co/BCq4Pnd

Answer 1

先改一下你的body组件的class，你给错了class，对我来说结果还好吗？

Answer 2

首先计算第一个元素的高度，即（80px 包括边框和内边距）。

将 80px top 赋予第二个元素。

第三个元素的顶部为160px，依此类推。

所有元素都会有position:sticky

试试这个，

body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; height:1000px}
.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
  height:50px; background:#aaa; border-color:red;
}
.main-content{
  min-height:1000px;
}

.main-header{position:sticky; top:0px;}
div.main-header{top:80px }
.main-footer{position:sticky; top:160px }

<main class="main-container">
  <header class="main-header">HEADER</header>
  <div class="main-header">MAIN CONTENT</div>
  <footer class="main-footer">FOOTER</footer>
</main>

粘性位置相互重叠的多个 div

Multiple divs with sticky position overlapping each other

html

javascript

css

sticky