Блог

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

Исправлена панель навигации при прокрутке в зависимости от ее высоты в react

#javascript #reactjs

#javascript #reactjs

Вопрос:

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

  const [isFixed, setIsFixed] = useState(false);
  const categoriesRef = useRef(null);

  const categoriesFixed = () => {
    if (window.pageYOffset > categoriesRef.current.offsetTop) setIsFixed(true);
    else setIsFixed(false);
  };

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

return (
    <div className="categories py-4">
      <div className="container-fluid">
        <nav ref={categoriesRef} className={`categories-nav border ${isFixed amp;amp; 'fixed-categories'}`}>
          <div className="categories-container">
         
          </div>
        </nav>
      </div>
    </div>
  );

Это работает при прокрутке вниз, но при прокрутке вверх панель навигации исправлена, поэтому моя функция не получает значение offsetTop из categoriesRef.current.offsetTop и перестает исправляться только при прокрутке только до верха окна. Есть ли способ сделать это правильно?

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

1. Если «IE» не обязательно должен поддерживаться, вы можете проверить css position: sticky , он намного проще в использовании. В противном случае вы должны использовать не навигационную «offsettop», а вычисленную высоту панели навигации (с getBoundingRect из заголовка). Если вы все еще хотите использовать offsetTop, вы все равно можете сохранить его в состоянии и использовать вместо него сохраненное значение.

2. Вы могли бы добавить некоторое дополнительное верхнее смещение к navbar верхнему смещению: if (window.pageYOffset > categoriesRef.current.offsetTop 50) setIsFixed(true) ;