How to make scroll work from jquery to React js

Question

I am trying to use scrollY to add and remove class using react. I have it working with jquery but can't seem to grasp how to convert it into React. Here is the before and after. I am lost on how to target .navbar that lives in Navbar.js in a different folder as well. Please help!

$(document).ready(function(){
        $(window).scroll(function(){
            // sticky navbar on scroll script
            if(this.scrollY > 20){
                $('.navbar').addClass("sticky");
            }else{
                $('.navbar').removeClass("sticky");
            }

import React, { Component, useEffect } from 'react';
import Animate from 'animate.css-react';
import Navbar from '../Navigation/Navbar'



export default function Scroll() {
    
    const[scroll, setScroll] = useState(false);
    useEffect(() => {
        
        window.addEventListener("scroll", () => {
            if(window.scrollY > 20) {
                $('.navbar').addClass("sticky");
            }else{
                $('.navbar').removeClass("sticky");
            }
        });
         
    }, []);
}

Drew Reese · Accepted Answer · 2021-07-22 04:07:25Z

1

Ideally you would use a React ref attached to the navbar to get access to the underlying DOMNode, but sometimes this isn't possible, and in these situations you can use document.getElementById.

export default function Scroll() {
  ...

  useEffect(() => {
    const navBar = document.getElementById(".navbar");

    const scrollHandler = () => {
      if (window.scrollY > 20) {
        navBar?.addClass("sticky");
      } else {
        navBar?.removeClass("sticky");
      }
    }
        
    window.addEventListener("scroll", scrollHandler);
    
    // Return effect cleanup function to remove listener
    return () => {
      window.removeEventListener("scroll", scrollHandler);
    };
  }, []);
}

answered Jul 22, 2021 at 4:07

Drew Reese

207k19 gold badges279 silver badges292 bronze badges

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

1 Comment

Kurtis Jin Over a year ago

I see! That makes sense! I am going to give it a go! Thank you for teaching me!

Collectives™ on Stack Overflow

How to make scroll work from jquery to React js

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