В своих проектах я хочу использовать как можно больше CSS и как можно меньше JavaScript (из соображений доступности).

Вот почему я искал способ изменить размер заголовка при прокрутке с помощью простого CSS.




Демо с сайта ЮрисКодингКлуб — советы о том, как попасть в технологии в качестве переключателя карьеры на любом этапе.

Вот что я нашел.


Код

Проект был построен с использованием Next и TypeScript.

Чтобы добиться эффекта изменения размера, нам нужно создать внешний и внутренний контейнеры в HTML, показанные здесь как <header className"header-outer"> а также <div "header-inner">.


HTML

Вот код HTML для создания заголовка.

<header className="header-outer">
  <div className="header-inner">
    <Link href="https://dev.to/">
      <div className="logo-container">
        <a className="logo" aria-label="back to home">
        </a>
       </div>
    </Link>
    <Navbar />
  </div>
</header>
Войти в полноэкранный режим

Выйти из полноэкранного режима


CSS

Вот код CSS для оформления заголовка.

Чтобы создать эффект, мы должны работать с разной высотой и верхним положением для каждого контейнера.

И внешний, и внутренний контейнеры должны иметь position: sticky. Высота внешнего контейнера больше высоты внутреннего контейнера на то, насколько меньше положение сверху. Вы можете использовать высоту, к которой стремитесь.

.header-outer {
  align-items: center;
  background: white;
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  /* set the height for the header at its max height you want */
  height: 150px;
  left: 0;
  padding: 0 50px;
  position: sticky;
  /** set the value of `top` with the difference between
  * the height of the outer and inner container to compensate
  * for this */
  top: -50px;
  width: 100%;
  z-index: 1;
}

.header-inner {
  align-items: center;
  background: white;
  display: flex;
  /** specify the height of the header that you want when scrolling 
  *The difference between this height and the height of the outer header
  *is the value of the `top` of the outer container */
  height: 100px;
  justify-content: space-between;
  left: 0;
  position: sticky;
  top: 0;
  width: 100%;
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Вот и все.

Теперь при прокрутке липкая позиция внешнего контейнера начинается за пределами экрана на 50 (из-за отрицательного значения top: -50px), а теперь внутренний контейнер застревает на той высоте, к которой вы стремитесь.


Вывод

Есть так много замечательных вещей, которые вы можете сделать, используя только CSS. Вам просто нужно проявить немного творчества и захотеть найти решение для использования простого CSS.

Если у вас есть другие предложения, я был бы рад, если бы вы могли поделиться ими в комментариях ниже.


Спасибо

Спасибо за ваше чтение и время. Я очень ценю это!