Как добавить ClassName и удалить его событие onScroll в React.JS?

Dabu 2019-10-25 09:26.

Я пытаюсь создать липкий заголовок, который может менять цвет фона в зависимости от его положения на странице. Для этого я пытаюсь добавить className «active» к моему стилизованному компоненту «StyledHeader», который появится, когда scrollPositionY станет выше 400 пикселей и исчезнет, когда он будет ниже.

Другими словами, я хочу сделать что-то вроде этого, но с использованием React.JS, синтаксиса JSX и стилизованных компонентов.

Вот что у меня есть сейчас:

import { Link } from '@reach/router';

import DuskLogo from '../images/dusk_logo.svg';

import { 
    StyledHeader, 
    StyledDuskLogo
} from '../styles/StyledHeader';

const Header = () => (
<StyledHeader>
  <div className="header-content">
    <Link to="/">
    <StyledDuskLogo src={DuskLogo} alt="dusk-logo" />
    </Link>
  </div>
</StyledHeader>
)

export default Header;

Вы знаете простой способ сделать это?

reactjs jsx styled-components

2 answers

blueseal 2019-10-25 16:46.

добавьте прослушиватель событий в свой useEffect. при прокрутке вниз значение window.scrollYувеличится, например 1, 2, ... 100 .. (в пикселях) и обновит ваше значение colorв useStateсоответствии с window.scrollY. попробуйте что-то вроде этого

const StyledBody = window.styled.div`
  background: lightgray;
  height: 5000px;
`;

const StyledText = window.styled.h4`
  text-align: center;
  width: 250px;
  margin: auto;
  line-height: 40px;
`;

const StyledHeader = window.styled.div`
  background-color: ${props => props.color};
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0px;
  padding: 0;
  z-index: 10000;
  transition: all 1s ease-in-out;
`;

const Header = () => {
  const [color, setColor] = React.useState("rgba(17, 42, 107, 0.7)");

  const handleScroll = React.useCallback((event) => {
    let scrollTop = window.scrollY;

      //console.log(scrollTop );  //1,2,...100,...200...etc (in px)

      if (scrollTop >= 20 && scrollTop < 50) {
        setColor("yellow");
      }

      if (scrollTop >= 50 && scrollTop < 90) {
        setColor("red");
      }

      if (scrollTop >= 90 && scrollTop < 120) {
        setColor("green");
      }
      if (scrollTop >= 120 && scrollTop < 150) {
        setColor("blue");
      }
      if (scrollTop >= 150 && scrollTop < 180) {
        setColor("violet");
      }
      if (scrollTop >= 180 && scrollTop < 210) {
        setColor("purple");
      }
});

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

  return (
    <StyledBody>
      <StyledHeader color={color}>
        <StyledText>My background color changes</StyledText>
      </StyledHeader>
    </StyledBody>
  );
};

export default Header;

вот рабочая демонстрация .. измените код в соответствии с вашими потребностями. демо

Изменить: я добавил для вас стилизованные компоненты. проверьте и дайте мне знать, работает ли это для вас. чтобы узнать больше об этих крючках, перейдите по ссылке useEffectиuseCallback

albert 2019-10-25 16:54.

сам не запускал этот код, но это может быть что-то вроде:

const Header = () => {
  const headerEl = React.useRef();
  const [offsetTop, setOffsetTop] = React.useState(0);

  React.useEffect(() => {
    window.addEventListener("scroll", onScroll, false);
    return () => {
      window.removeEventListener("scroll", onScroll, false); // to remove scroll event on unmount
    };
  }, []);

  const onScroll = () => setOffsetTop(headerEl.current.offsetTop);

  return (
    <StyledHeader ref={headerEl} className={offsetTop > 400 ? "active" : ""}>
      ...
    </StyledHeader>
  );
};

export default Header;

Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

MORE COOL STUFF

Яна Дуггар: все, что она говорила о любви и ее 5-летнем окне, чтобы найти «того самого»

Яна Дуггар открыто говорила о своих поисках любви. Вот все, что она сказала на эту тему и о своем пятилетнем окне для замужества.

2023-06-12.

Сэм Хьюэн точно знает, что он возьмет из съемочной площадки «Чужестранки»: «Я чувствую себя Джейми, когда надеваю их»

Звезда «Чужестранки» Сэм Хьюэн недавно рассказал, что он возьмет со съемочной площадки, чтобы вспомнить Джейми Фрейзера, роль, которая сделала его звездой.

2023-06-12.

Ранняя песня Beatles, которая вошла в число «самых захватывающих выступлений» группы, по мнению инсайдера Fab Four

«She Loves You» была написана за час, записана за день и стала песней The Beatles с одним из лучших исполнений в их карьере.

2023-06-11.

Долли Партон помогла своей «инвалидной» бабушке, когда ни один из других внуков не стал бы — она тоже разыгрывала ее

У Долли Партон и ее бабушки Бесси были особые отношения. Бабушка Партон была очень больна, но это не мешало Долли разыгрывать ее.

2023-06-11.

Какая древесина самая твёрдая в мире?

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

2025-10-29.

10 самых страшных морских существ, скрывающихся в глубинах океана

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

2025-10-29.

10 лучших чар для мечей в Minecraft

Если вы сражаетесь с враждебными мобами или готовитесь к PvP-боям, знание лучших чар для мечей в Minecraft может дать вам серьёзное преимущество. Зачарование мечей позволяет наносить больше урона, увеличивать количество выпадающих мобов и продлевать срок службы меча.

2025-10-29.

13 социалистических стран, которые сильно отличаются друг от друга

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

2025-10-29.

Резюме «Медведя»: Маркус — самый добрый, мягкий и искренний человек в Чикаго?

В «Детях» появится громкая камео и несколько разрушительных новостей

2024-07-03 19:12.

За 9800 долларов вы бы упаковали их в эту семиместную Toyota RAV4 2008 года выпуска?

Утверждается, что этот RAV4 находится в отличном состоянии и готов к игре в музыкальные стулья.

2024-07-03 19:04.

Фургон доставки Amazon загорелся в результате огненного взрыва во время летней жары в Хьюстоне

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

2024-07-03 19:04.

«Шоу Черной Пантеры» от Marvel станет самым важным анимационным шоу за всю историю

«Глаза Ваканды» напрямую связаны с MCU, а также обновления о «Людях Икс '97», «Что, если...», «Сорвиголова» и многом другом.

2024-07-03 19:03.

История знакомств Авы Гарднер: взгляд назад на браки и романы голливудской иконы

Ава Гарднер была замужем за Микки Руни и Фрэнком Синтрой, и встречалась с несколькими другими голливудскими звездами. Вот взгляд назад на историю знакомств Авы Гарднер.

2024-06-23.

Кто жена Джона Клиза? Все о Дженнифер Уэйд

Джон Клиз женился на Дженнифер Уэйд в 2012 году. Вот все, что нужно знать о жене Джона Клиза, Дженнифер Уэйд.

2024-06-16.

Кто муж Эллисон Феликс? Все о Кеннете Фергюсоне

Олимпийская чемпионка Эллисон Феликс вышла замуж за своего мужа Кеннета Фергюсона в 2018 году. Вот все, что нужно знать о муже Эллисон Феликс, Кеннете Фергюсоне.

2024-01-15.

Кто муж Мены Сувари? Все о Майкле Хоупе

Мена Сувари замужем за своим мужем Майклом Хоупом с 2018 года. Вот все, что нужно знать о муже Мены Сувари.

2023-11-05.

3 проверенных способа улучшить свои навыки письма

Преимущества письма и стратегии, которые помогут вам в этом

В 2022 году, с выпуском GPT-3, навыки письма, кажется, стали менее важными. С помощью ИИ люди с плохим письмом также могут генерировать качественный персонал.

Медленная эрозия: раскрытие того, как люди угасают в своей карьере

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

Что делает подкаст влиятельным?

На прошлой неделе я заметил пресс-релиз, разосланный через PressGazette (новостной веб-сайт британских СМИ). В статье сообщалось, что Acast, скандинавская компания по размещению и рекламе подкастов, возглавит консорциум «вероятно, самых влиятельных» издателей подкастинга.

Language

Japanese

Spanish

German

French

Thai

Portuguese

Russian

Vietnamese

Italian

Korean

Turkish

Indonesian

Polish

Hindi

Как добавить ClassName и удалить его событие onScroll в React.JS?

2 answers

Related questions

MORE COOL STUFF

Яна Дуггар: все, что она говорила о любви и ее 5-летнем окне, чтобы найти «того самого»

Сэм Хьюэн точно знает, что он возьмет из съемочной площадки «Чужестранки»: «Я чувствую себя Джейми, когда надеваю их»

Ранняя песня Beatles, которая вошла в число «самых захватывающих выступлений» группы, по мнению инсайдера Fab Four

Долли Партон помогла своей «инвалидной» бабушке, когда ни один из других внуков не стал бы — она тоже разыгрывала ее

Какая древесина самая твёрдая в мире?

10 самых страшных морских существ, скрывающихся в глубинах океана

10 лучших чар для мечей в Minecraft

13 социалистических стран, которые сильно отличаются друг от друга

Резюме «Медведя»: Маркус — самый добрый, мягкий и искренний человек в Чикаго?

За 9800 долларов вы бы упаковали их в эту семиместную Toyota RAV4 2008 года выпуска?

Фургон доставки Amazon загорелся в результате огненного взрыва во время летней жары в Хьюстоне

«Шоу Черной Пантеры» от Marvel станет самым важным анимационным шоу за всю историю

История знакомств Авы Гарднер: взгляд назад на браки и романы голливудской иконы

Кто жена Джона Клиза? Все о Дженнифер Уэйд

Кто муж Эллисон Феликс? Все о Кеннете Фергюсоне

Кто муж Мены Сувари? Все о Майкле Хоупе

местоимения очень страшные

3 проверенных способа улучшить свои навыки письма

Преимущества письма и стратегии, которые помогут вам в этом

Медленная эрозия: раскрытие того, как люди угасают в своей карьере

Что делает подкаст влиятельным?

Language