Question

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

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

感谢您的时间和支持。

Answer 1

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

您也可以do this使用js。

编辑：

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>

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

1 个答案: