Прокрутка логотипа заголовка вниз / вверх при прокрутке вниз / вверх

Question

Поскольку я новичок в переполнении стека, пожалуйста, прости меня, если я ошибаюсь, задавая этот вопрос. Я настраиваю новый веб-сайт в WordPress и хочу, чтобы логотип в главном заголовке прокручивался вниз / вверх при прокрутке вниз / вверх.

Я хочу, чтобы логотип плавно прокручивался. Мне известно о свойстве position:fixed, но я не хочу его использовать, потому что мне нужно, чтобы логотип прокручивался вниз / вверх до margin-top: 20 pixels после прокрутки.

Спасибо за ваше время и поддержку.

Answer 1

Если я правильно понял ваш вопрос, вы можете использовать новое свойство css, которое делает это: position: sticky.

Вы также можете сделать это с помощью 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>