在向下/向上滚动时向下/向上滚动标题徽标

Question

由于我是stack-overflow的新手，如果我在问这个问题时犯了错误，请原谅我。我正在 WordPress 中建立一个新网站，并希望在我向下/向上滚动时，主标题中的徽标向下/向上滚动。

我希望徽标平滑滚动。我知道position:fixed 属性，但我不想使用它，因为我需要徽标在滚动后向下/向上滚动到margin-top: 20 pixels。

感谢您的时间和支持。

Answer 1

如果我正确理解了您的问题，您可以使用一个新的 css 属性来执行此操作：position: sticky。

你也可以用jsdo this。

编辑：

h1{
  margin-top: 100px;
  position: sticky;
  top: 20px; /* 20px from the top ? */
}

<h1>
Title
</h1>

<section>
  <p>
  Lorem ipsum.
  </p>
</section>

<section>
  <p>
  Lorem ipsum.
  </p>
</section>

<section>
  <p>
  Lorem ipsum.
  </p>
</section>

<section>
  <p>
  Lorem ipsum.
  </p>
</section>

<section>
  <p>
  Lorem ipsum.
  </p>
</section>

<section>
  <p>
  Lorem ipsum.
  </p>
</section>

<section>
  <p>
  Lorem ipsum.
  </p>
</section>

<section>
  <p>
  Lorem ipsum.
  </p>
</section>

<section>
  <p>
  Lorem ipsum.
  </p>
</section>

<section>
  <p>
  Lorem ipsum.
  </p>
</section>

<section>
  <p>
  Lorem ipsum.
  </p>
</section>

<section>
  <p>
  Lorem ipsum.
  </p>
</section>

<section>
  <p>
  Lorum ipsem.
  </p>
</section>

<section>
  <p>
  Lorem ipsum.
  </p>
</section>

<section>
  <p>
  Lorem ipsum.
  </p>
</section>

<section>
  <p>
  Lorem ipsum.
  </p>
</section>

<section>
  <p>
  Lorem ipsum.
  </p>
</section>

<section>
  <p>
  Lorem ipsum.
  </p>
</section>

<section>
  <p>
  Lorem ipsum.
  </p>
</section>