React 功能组件中的偏移顶部，getBoundingClientRect 无法正常工作

Question

我正在尝试在滚动屏幕期间使用 React 功能组件实现类交换站点导航。

我向 windows 添加了一个侦听器，并使用 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