如何用户定位：在 css 中粘性

问题描述

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

Above : 容器是一个普通的 div 并且内部 div 有一个粘性位置和顶部：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>

解决方法

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

,

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

如果你想让它工作，它应该怎么做：

* {
  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>

,

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

.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>