Как создать растущий-уменьшающийся заголовок в React

Привет, мир!

Позвольте мне показать вам, как мы можем создать заголовок, который сжимается при прокрутке вниз и расширяется при прокрутке обратно к вершине.

Шаги для достижения цели

1. Прислушивайтесь к прокрутке страницы.
2. Когда страница прокручивается до определенного места, сжимайте заголовок.
3. При прокрутке обратно к вершине верните заголовок в нормальное положение.
4. Добавьте несколько переходов, чтобы сделать рост/уменьшение плавным

Реализация

Прослушивание прокрутки страницы

Мы можем прослушивать прокрутку с помощью слушателей событий. Мы должны начать прослушивать прокрутку, когда компонент монтируется, и прекратить прослушивание, когда компонент размонтируется. Для этого мы можем использовать хуки useEffect.

useEffect(() => {
    // Adding the scroll listener
    window.addEventListener('scroll', handleScroll, { passive: true });

    return () => {
        // Removing listener
        window.removeEventListener('scroll', handleScroll);
    };
}, []);

Passive используется для обозначения того, что событие является пассивным, и обработчик не будет вызывать preventDefault для отключения прокрутки.

Реализация обработчика

Чтобы узнать, прокручивается страница или нет, мы можем использовать флаг isScrolled . Флаг isScrolled должен быть установлен в true, когда экран прокручивается за определенную точку (например, 250) и в false, когда прокрутка возвращается к вершине (когда позиция прокрутки меньше 250). Мы можем отслеживать позицию прокрутки с помощью window.pageYOffset .

Таким образом, функция-обработчик будет выглядеть следующим образом:

// Flag, which stores whether the screen is scrolled
const [isScrolled, setScrolled] = useState(false);

// Handler when page is scrolled
const handleScroll = () => {
  if (window.pageYOffset > 250) {
    setScrolled(true)
  } else {
    setScrolled(false)
  }
}

Реализация компонента

Теперь мы можем определить, прокручивается страница или нет, используя флаг isScrolled. Теперь мы можем реализовать разметку компонента заголовка следующим образом:

return (
    <div className = {`header-container ${isScrolled && 'header-scrolled'}`}>
      <h1>SR</h1>
      <h2>Sriram</h2>
    </div>
  );

Здесь мы внедряем класс header-scrolled, когда экран прокручивается. То есть когда флаг isScrolled равен true.

Давайте посмотрим на стилизацию компонента:

.header-container {
  display: flex;
  align-items: center;
  background: $header-color;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
  height: 7rem;
}
.header-scrolled {
  height: 3rem;
}

Здесь в классе header-container высота установлена на 7rem . Когда страница прокручивается и вводится класс header-scrolled, высота будет заменена на 3rem , что приведет к уменьшению заголовка по вертикали.

Но переход от роста к уменьшению теперь будет резким. Мы можем добавить некоторый переход в CSS, чтобы сделать рост/уменьшение плавным.

.header-container {
  display: flex;
  align-items: center;
  background: $header-color;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
  height: 7rem;
  // To make the grow/shrink smooth.
  transition: height 2s;
}

Вот и все, мы закончили! Теперь при прокрутке экрана заголовок будет плавно увеличиваться и уменьшаться.

Окончательный код будет выглядеть так:

import React, { useEffect, useState } from "react";
import "./header.scss";

export default function Header() {
  const [isScrolled, setScrolled] = useState(false);
  useEffect(() => {
    window.addEventListener('scroll', handleScroll, { passive: true });

    return () => {
        window.removeEventListener('scroll', handleScroll);
    };
}, []);
const handleScroll = () => {
  if (window.pageYOffset > 250) {
    setScrolled(true)
  } else {
    setScrolled(false)
  }
}
  return (
    <div className = {`header-container ${isScrolled && 'header-scrolled'}`}>
      <h1>SR</h1>
      <h2>Sriram</h2>
    </div>
  );
}

Надеюсь, это было полезно для вас. С нетерпением ждем ваших отзывов, спасибо!

Originally published at https://sriram23.hashnode.dev.