add class when scroll to specific id ReactJS

Question

I am trying to add a class when the top of the window scrolls to a specific ID and removes class when scrolls back to the top. i am new to ReactJs and unsure how to accomplish this.

window.onscroll = function() {scrollFunction()};

 scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myID").className = "test";
  } else {
    document.getElementById("myID").className = "";
  }
}

how can i use something like this in React? looking for a simple function that will handle this

How do find out if the window is scrolled to a particular id? or <a href="#somethin" clicking this link it'll navigate inside the page! — lost_in_magento
– lost_in_magento, Commented May 15, 2020 at 18:16
If you don't have the logic! First, we have to find if the id is in viewport! and then we have to write toggle classes! — lost_in_magento
– lost_in_magento, Commented May 15, 2020 at 18:18

lost_in_magento · Accepted Answer · 2020-05-15 18:37:54Z

1

You can use var getBoundingClientRect and calculate the viewable element!

I have created stackblitz link to the kind of fixing your problem! If you need further help comment

componentDidMount() {
    const getViewable = document.getElementById("start-editing");
    const that = this;
    window.addEventListener(
      "scroll",
      function(event) {
        if (that.isInViewport(getViewable)) {
          getViewable.classList.add("black");
          getViewable.classList.remove("gold");
        } else {
          getViewable.classList.add("gold");
          getViewable.classList.remove("black");
        }
      },
      false
    );
  }

  isInViewport = elem => {
    var bounding = elem.getBoundingClientRect();
    return (
      bounding.top >= 0 &&
      bounding.left >= 0 &&
      bounding.bottom <=
        (window.innerHeight || document.documentElement.clientHeight) &&
      bounding.right <=
        (window.innerWidth || document.documentElement.clientWidth)
    );
  };

answered May 15, 2020 at 18:37

lost_in_magento

6838 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pdavis33 Over a year ago

yep this is what i was looking for! thanks for the help. new to react and trying to wrap my head around it.

Collectives™ on Stack Overflow

add class when scroll to specific id ReactJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related