1

我的网站中有一个 div，里面有另一个 div，我给了内部 div 位置sticky 和 ​​top:0 但它不起作用！这是我的代码示例：

上图：容器是一个普通的 div，内部 div 有一个粘性位置和 top: 0 但它不起作用。任何解决此问题的建议！

.sticky-div{
      background: #fed700;
      position: sticky;
      top: 0;
    }
    <div class="container">
      <nav>
        <li>item1</li>
        <li>item1</li>
      </nav>
      <div class="sticky-div">
        Sticky
      </div>
    </div>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>

4

3 回答 3

0

您只需要删除周围的容器 div 或使该 div 具有粘性。

于 2021-03-12T19:19:45.363 回答
0

我相信只有当它所在的容器上有粘贴位置时，粘性定位才会起作用。

如果你想让它工作它应该如何做到这一点：

* {
  padding: 0;
  margin: 0;
}

.sticky-div,
.stickyContainer {
  background: #fed700;
}

.stickyContainer {
  position: sticky;
}
<div class="sticky-div">
  Sticky
</div>
<p>text</p>
<p>text</p>

<div class="stickyContainer">
  Sticky
</div>
<p>text</p>
<p>text</p>

于 2021-03-12T19:22:08.490 回答
0

它是根据用户的滚动位置来定位的。但是所有内容必须在同一个容器中，您可以将文本放在容器内或将粘性元素移出容器

.sticky-div{
  background: #fed700;
  position: sticky;
  top: 0;
}
<div class="container">
  <div class="sticky-div">
    Sticky
  </div>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

于 2021-03-12T19:30:34.637 回答