How to add class on scroll ReactJS

Question

Firstly i know theres many questions like this but i tried their answers too....

So lets get to the point: I want to add a class when i scroll in React... I tried to research some answers but none of them worked...

this is my app.js:

import React from "react";
import "./styles.css";
import { BrowserRouter as Router } from "react-router-dom";

export default class App extends React.Component {
  componentDidMount() {
    window.addEventListener("scroll", () => {
      let activeClass = "";
      if (window.scrollY === 0) {
        activeClass = "top";
      }
      this.setState({ activeClass });
    });
  }
  render() {
    return (
      <>
        <Router>
          <div className="something">
            <div class="box"></div>
            <div class={`box-menu ${this.activeClass}`}>something here</div>
            <div class="content">
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
            </div>
          </div>
        </Router>
      </>
    );
  }
}

and this is my styles.css:

body {
  margin: 0;
  padding: 0;
}

.box {
  height: 100px;
  background-color: violet;
}

.box-menu {
  position: fixed;
  top: 100px;
  bottom: 0;
  left: 0;
  width: 200px;
  z-index: 5;
  overflow-y: scroll;
}

/* THE MENU SHOULD GO TO THE TOP AND HAVE RED BACKGROUND COLOR */

.box-menu.top {
  top: 0;
  background: red;
}

.content {
  margin-left: 200px;
  padding-left: 28px;
  background-color: aqua;
  height: 100%;
}

I dont know why its not working... also i dont have any errors.

This is my code sandbox: https://codesandbox.io/s/inspiring-cloud-s27uv?file=/src/styles.css:0-430

Lastly if you guys need more details pls tell on the comments and ill do my best to provide it to you... Thank you in advance!!!

not directly related to your question, but if adding an event listener in `componentDidMount` as you do here, you *must* remove it in `componentWillUnmount`, or you will get memory leaks — Robin Zigmond, Aug 08 '21 at 10:54

matthiasgiger · Answer 1 · 2021-08-08T10:56:41.067

0

Two things are missing:

First set the initial state (to make the component stateful)

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {activeClass: 'top'};
  }
  ...
}

and then access the state from the state object:

<div className={`box-menu ${this.state.activeClass}`}>something here</div>

edited Aug 08 '21 at 10:56

answered Aug 08 '21 at 10:53

matthiasgiger

1,086
9
17

1

it should also be `className` rather than `class` – Robin Zigmond Aug 08 '21 at 10:54
Right, thanks, made the edit. However it also works with class (there will be a warning). – matthiasgiger Aug 08 '21 at 10:57
what? i did access the state, also i was in a rush so i didnt had the time to put className – Aug 08 '21 at 11:54
No worries, don't forget to accept an answer that works for you. In your code you didn't access the state (it also wasn't there): `class={\`box-menu ${this.activeClass}\`}`. – matthiasgiger Aug 08 '21 at 11:58
i fixed it! and i really want to accept both of these answers but the other guy gave explanation so sorry but i give you upvote for helping :) – Aug 08 '21 at 12:33

lukbrt · Accepted Answer · 2021-08-08T11:00:44.703

It doesn't update because you mislead local scoped variable with state. In the scope of event listener you set component state, but in your render function you try to refer to global variable which doesn't exist. In your case 'activeClass' is accessible in the scope of event listener only.

Other thing is that you should unlisten the scroll event listener in the componentWillUnmount() lifecycle method to prevent memory leaks. You should also you className attribute instead of class - this is one of the differences between standard HTML and JSX.

If you want to access your state in a way like you did you could destructure the activeClass from the this.state object:

 render() {
  const { activeClass } = this.state;
  return (
    ...
  );
}

Working example:

import React from "react";
import "./styles.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activeClass: "" };
  }

  componentDidMount() {
    window.addEventListener("scroll", () => {
      let activeClass = "";
      if (window.scrollY === 0) {
        activeClass = "top";
      }
      this.setState({ activeClass });
    });
  }

    componentWillUnmount() {
  }
  render() {
    return (
      <>
          <div className="something">
            <div className="box"></div>
            <div className={`box-menu ${this.state.activeClass}`}>something here</div>
            <div className="content">
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
              SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br /> SCROLLING
              <br />
            </div>
          </div>
      </>
    );
  }
}

score 0 · Answer 3 · answered Aug 08 '21 at 11:12

There are couple of issues in your code.

You need to set a initial state

 constructor(props) {
  super(props);
  this.state = {activeClass: 'top'};
}

In the jsx you need to use

<div className={`box-menu ${this.state.activeClass}`}>

Also you are missing a space in your css

.box-menu .top {
  top: 0;
  background: red;
}

How to add class on scroll ReactJS

3 Answers3