Блог

Главная - Вопросы по программированию - ReactJS — Изменение цвета навигационной панели при прокрутке

ReactJS — Изменение цвета навигационной панели при прокрутке

#javascript #reactjs #scroll #navbar

Вопрос:

У меня есть следующий код:

 import React, {useState} from 'React';
import Header from './styles.js';

const HeaderComponent = props => 
{
  const [navBg, setNavBg] = useState(false);
  const isHome = props.name === 'Homepage' ? true : false;

  const changeNavBg = () =>
  {
   window.scrollY >= 800 ? setNavBg(true) : setNavBg(false);
  }

  window.addEventListener('scroll', changeNavBg);

  return (
  <Header {...(isHome amp;amp; navBg ? { backgroundColor: '#00008' : {})} />
  )
}

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

Выпьем за ваше время.

Ответ №1:

Вот несколько подходов, которые вы могли бы попробовать

1. Используйте событие пользовательского интерфейса React onScroll
  return (
   <div onScroll={changeNavBg}>
     <Header {...(isHome amp;amp; navBg ? { backgroundColor: '#00008' : {})} />
   </div>
 )
2. Рассмотрите возможность привязки слушателя к useEffect 
 import React, {useState} from 'React';
import Header from './styles.js';

const HeaderComponent = props => {
  const [navBg, setNavBg] = useState(false);
  const isHome = props.name === 'Homepage' ? true : false;

  const changeNavBg = () => {
   window.scrollY >= 800 ? setNavBg(true) : setNavBg(false);
  }

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

  return (
  <Header {...(isHome amp;amp; navBg ? { backgroundColor: '#00008' : {})} />
  )
}

Комментарии:

1. Мне действительно удалось исправить это, передав navBg в качестве опоры в моем styles.js и проверяю там, установлено ли значение true amp; isHome. Тем не менее я отмечу ваш ответ как правильный, поскольку вы заслуживаете его за приложенные усилия. Спасибо.

2. Круто. Спасибо. В любом случае, вот рабочий пример stackblitz.com/edit/react-jddnch?file=src/App.js

Метки: