Глючное поведение заголовка меню с React, прокручивается до 100px при нажатии в режиме телефона - PullRequest
Новая
       24

Глючное поведение заголовка меню с React, прокручивается до 100px при нажатии в режиме телефона

0 голосов
/ 16 апреля 2020

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

ссылка на приложение - https://eastside-wedding-videography.netlify.app/ourwork

ссылка на github - https://github.com/ChaseMillers/Eastside-Wedding-Videography

Вот заголовок / Код меню - 

<div className="header" id="menu-container" onBlur="toggleButton" ref={ref}>
        <input className="menu-btn" type="checkbox" id="menu-btn" checked={active}/>
        <label className="menu-icon" htmlFor="menu-btn">
          <span className="navicon">
           <HamburgerSqueeze isActive={active} toggleButton={toggleButton} />
           </span>
        </label>

        <ul className="nav">
          <li className="nav-item">
            <Link 
            className="nav-link"  
            to="/">
              Home
            </Link>
          </li>
       </ul>
      </div>
  );
};

Меню затем передается компоненту липкого заголовка и затем выводится - 

const StickyHeader = () => {
  const [isSticky, setSticky] = useState(false);
  const ref = useRef(null);
  const handleScroll = () => {
    if (ref.current){
    setSticky(ref.current.getBoundingClientRect().top <= 0);
    }
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);

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

  return (
    <div className={`sticky-wrapper${isSticky ? ' sticky' : ''}`} ref={ref}>
    <Menu />
    </div>
  );
};

Любые мысли, идеи или предположения по поводу решения все приветствуются Спасибо !

...