React.js 16.8 底部导航在滚动后固定到顶部

Question

The Navbar is currently positioned at the bottom of the view port and it need's to become fixed to the top as I scroll. I have tried mixing in jquery because that's how most tutorials that I have found use. If anyone has a solution using react.js I would really appreciate it. I currently have this:

const Navbar = () => {

  const main = document.querySelector('.home');
  const nav = document.querySelector('.navbar');


  window.onscroll = function () {

      if (window.pageYOffset > (main.offsetHeight - nav.offsetHeight)) {
          nav.classList.remove('bottom-nav');
          nav.classList.add('nav');
      } else {
          nav.classList.add('bottom-nav');
          nav.classList.remove('nav');

      }
  }
  return(
    <nav className="navbar">
        <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#resume">Resume</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
  )
}

This is what the scss looks like:

.top-nav {
    position: fixed;
    top: 0;
}

.bottom-nav {
    position: absolute;
    bottom: 0;
}

and other styling under just the html tag nav .

The error that I am getting is:

TypeError: Cannot read property 'offsetHeight' of null
Navbar.window.onscroll
src/components/Navbar.jsx:12
   9 | 
  10 | window.onscroll = function () {
  11 | 
> 12 |     if (window.pageYOffset > (main.offsetHeight - nav.offsetHeight)) {
     | ^  13 |         nav.classList.remove('bottom-nav');
  14 |         nav.classList.add('nav');
  15 |     } else {

Answer 1

This is happening since you are attaching scroll handler before the component is actually mounted. Move your scroll handler to App.js or parent component and initialize it after component has mounted. For this, you can use componentDidMount life-cycle hook if it is a class based component or useEffect hook if it is a functional component.

Also, the better "react" way would be using props to update components class. Give your navbar component any prop to handle toggling of class. Let's say we add a new prop sticky to navbar . Then we can update it like this:

const Navbar = (props) => {
  
  // we can directly use the prop value to update our classes

  return(
    <nav className={`navbar ${props.sticky ? 'nav' : 'bottom-nav'}`}>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#resume">Resume</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
     </nav>
   )
 }
 

Then in our parent component we can maintain a state to track when the navbar component's class needs to be updated. We then pass the state down as prop to the child component.

--------------------
  App.js
--------------------

/**
 * Class based approach
 **/

constructor() {
   this.main = null;
   this.nav = null;
   this.state = {
      stickyHeader: false
   }
}


componentDidMount() { 
   // we can safely store these values in instance variable
   // so that we just have to query the DOM once
   this.main = document.querySelector('.home');
   this.nav = document.querySelector('.navbar');

   window.onscroll = function () {
   
   if (window.pageYOffset > (main.offsetHeight - nav.offsetHeight)) {
      this.setState({stickyHeader: true});
   } else {
      this.setState({stickyHeader: false});
    }
  }
}

render() {
   ....
   <NavBar sticky={this.state.stickyHeader} />
   
}

/**
 * Functional component approach
 **/

// useRef value remains constant across render
// so we use it to define our variables
const main = useRef(null);
const nav = useRef(null);

// local state to keep track of navbar updates
const [stickyHeader, updateStickyHeader] = useState(false);

useEffect(() => { 
  // on mount query and update refs value
  main.current = document.querySelector('.home');
  nav.current = document.querySelector('.navbar');

  window.onscroll = function () {

   if (window.pageYOffset > (main.current.offsetHeight - nav.current.offsetHeight)) {
      updateStickyHeader(true);
   } else {
      updateStickyHeader(false);
    }
  }

}, [])

return (
  <>
    ...
    <NavBar sticky={this.state.stickyHeader} />
  </>

I would recommend you to read more about React lifecycle to understand better.