19.12.2023 в 10:16

Панель навигации React при изменении прокрутки

Когда дело доходит до создания визуально привлекательного пользовательского интерфейса, панель навигации играет решающую роль. В приложениях React панель навигации часто является координационным центром, который легко направляет пользователей по различным разделам. Но что, если бы мы могли улучшить это? Представьте панель навигации, которая динамически меняет цвет фона, высоту и отступы по мере прокрутки пользователем, добавляя элегантности вашему приложению React. В этом блоге мы рассмотрим, как добиться этого эффекта шаг за шагом.

Необходимые требования

Прежде чем мы углубимся в реализацию, давайте убедимся, что в нашем наборе инструментов есть необходимые инструменты. В этом руководстве предполагается, что вы имеете базовое представление о React и настроили приложение React. Если вы еще этого не сделали, вы можете создать новое приложение React с помощью следующей команды:

npx create-react-app scrolling-navbar-speaklouder
cd scrolling-navbar-speaklouder

Изменение цвета фона и отступов при прокрутке

1. Установка зависимостей

Для начала нам понадобится react-scroll библиотека для простого обнаружения событий прокрутки. Установите ее с помощью:

npm install react-scroll

2. Импорт и настройка

Импортируйте необходимые зависимости в свой компонент панели навигации:

import React, { useEffect, useState } from 'react';
import { Link, animateScroll as scroll } from 'react-scroll';
import './Navbar.css'; // Create a CSS file for styling

Настройте исходное состояние и используйте хук эффекта:

const Navbar = () => {
  const [scrolling, setScrolling] = useState(false);

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const handleScroll = () => {
    if (window.scrollY > 20) {
      setScrolling(true);
    } else {
      setScrolling(false);
    }
  };

3. Стилизация с помощью CSS

Создайте CSS-файл (Navbar.css) для динамического оформления панели навигации:

/* Add your initial styling here for navbar */

.navbar-scroll {
  background-color: #333; /* Set your desired background color */
  padding: 15px; /* Set your desired padding */
  /* Add additional styles for the scrolled state */
}

4. Динамическое применение стилей

Обновите свой компонент панели навигации, чтобы применять стили в зависимости от состояния прокрутки:

const Navbar = () => {
  // ... (previous code)

  return (
    <nav className={scrolling ? 'navbar-scroll' : ''}>
      {/* Your navbar content here */}
    </nav>
  );
};


export default Navbar;

5. Добавление react-spring для анимации

Добавьте свою логику анимации.

npm install react-spring

В этом примере при прокрутке страницы вниз панель навигации плавно меняет цвет фона, высоту и отступы, создавая гладкий и привлекательный пользовательский интерфейс.

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

Источник:

Comment button

#JavaScript #React

Войти на сайт