Смещение вершины в функциональных компонентах React, getBoundingClientRect не работает должным образом

Question

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

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

Код ниже всегда возвращает Top, равный нулю, независимо от положения моего прокрутки.

Где я иду не так в этом примере?

import React, {useEffect, useRef} from "react";

const Navigation = () => {
  const inputRef = useRef();

  const sections = [{
    name: "Portfolio",
    url: "#portfolio"
  },
  {
    name: "About",
    url: "#about"
  },
  {
    name: "Contact",
    url: "#contact"
  }];

  const navLinks = sections.map((section, index) => {
    return (
      <li className="nav-item mx-0 mx-lg-1" key={index}>
        <a className="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href={section.url}>{section.name}</a>
      </li>
    )
  });

  const handleScroll = () => {
    let offsetTop  = inputRef.current.getBoundingClientRect().top;
    console.log('Top ' + offsetTop);
  };

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

  return (
    <nav className="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav" ref={ inputRef }>
      <div className="container">
        <a className="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>
        <button className="navbar-toggler navbar-toggler-right text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          Menu
            <i className="fas fa-bars"></i>
        </button>
        <div className="collapse navbar-collapse" id="navbarResponsive">
          <ul className="navbar-nav ml-auto">
            {navLinks}
          </ul>
        </div>
      </div>
    </nav>
  );
};

export default Navigation;

При прокрутке позиции сверху, справа, снизу, слева, по высоте и ширине совпадают.

Я ожидаю, что при прокрутке страницы изменяется верхнее значение.

---

Мой код сейчас работает, следите за финальной версией

import React, { useEffect, useRef, useState } from "react";
import { Link, animateScroll as scroll } from "react-scroll";

const Navigation = () => {
  const inputRef = useRef();
  const [navClass, setNavClass] = useState('');

  const sections = [{
    name: "Portfolio",
    url: "portfolio"
  },
  {
    name: "About",
    url: "about"
  },
  {
    name: "Contact",
    url: "contact"
  }];

  const navLinks = sections.map((section, index) => {
    return (
      <li className="nav-item mx-0 mx-lg-1" key={index}>
        <Link
          activeClass="active"
          to={section.url}
          spy={true}
          smooth="easeInOutQuart"
          offset={-70}
          duration={800}
          className="nav-link py-3 px-0 px-lg-3 rounded"
          href="">
          {section.name}
        </Link>
      </li>
    )
  });

  const scrollToTop = () => {
    scroll.scrollToTop();
  };

  const handleScroll = () => {
    let offsetTop = window.pageYOffset;
    if ( offsetTop > 100 ){
      setNavClass('navbar-shrink');
    }else{
      setNavClass('');
    }
  };

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

  return (
    <nav className={`navbar navbar-expand-lg bg-secondary text-uppercase fixed-top ${navClass}`} id="mainNav" ref={inputRef}>
      <div className="container">
        <a className="navbar-brand js-scroll-trigger" href="#page-top" onClick={scrollToTop}>Start Bootstrap</a>
        <button className="navbar-toggler navbar-toggler-right text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          Menu
            <i className="fas fa-bars"></i>
        </button>
        <div className="collapse navbar-collapse" id="navbarResponsive">
          <ul className="navbar-nav ml-auto">
            {navLinks}
          </ul>
        </div>
      </div>
    </nav>
  );
};

export default Navigation;

Answer 1

Если ваша цель состоит в том, чтобы изменить класс вашей навигационной панели на основе позиции прокрутки вашего окна, было бы разумнее использовать window.pageYOffset вместо этого. Учтите, что навигационная панель никогда не покинет свою позицию, поэтому, когда бы вы ни позвонили .getBoundingClientRect().top, она всегда будет равна 0.

  const handleScroll = () => {
    let offsetTop  = window.pageYOffset;
    console.log('Top ' + offsetTop);
  };

Посмотрите в этой песочнице, как изменить внешний вид навигационной панели при прокрутке: https://codesandbox.io/s/navbar-change-color-onscroll-jepyc