React - A guide on accessing the scroll position of a div using JavaScript

Question

React - A guide on accessing the scroll position of a div using JavaScript

Within my side navigation bar, there is a title and other information. The title is fixed in place (sticky) and the sidebar has a height of 100vh. I am looking to add a box-shadow effect to the title div (sticky-title) only when the user scrolls down past the 100vh mark. Essentially, I want the box-shadow property to appear only after the user has scrolled beyond the initial viewport height. I attempted to use a scroll EventListener, but it seems to be referencing the main window's scroll position rather than that of the sidebar div.

For reference, you can find a link to the code sandbox playground below:

https://codesandbox.io/s/blue-glitter-6ds36

javascript html css reactjs

Answer 1

Answer №1

Check out these modifications to potentially enhance your App.js file:

  useEffect(() => {
    
    // Locate the title wrapper
    const title = document.querySelector('.sticky-title');
    
    const titleTop = title.offsetTop; // determine the top position of the title block 
                                      // relative to the window's top

    window.addEventListener("scroll", () => {

      console.log("hi", titleTop);
      setScroll(this.scrollY >= titleTop); // when window.scrollY is greater than the top 
                                           // of the title block, set the scroll state to True  
    });
  }, []);

Additionally, make changes in the JSX section of App.js:

<div className="panel" style={{ height: 2000 }}>{/*2000px for easier page scrolling*/}
  ...
</div>

and modify style.css:

.panel {
  width: 200px;
  height: 100vh;
  border: 2px solid black;
  white-space: pre-line;
  /* overflow: auto; */ <---- remove this as it hinders position: sticky from functioning properly
}

Answer 2

Check out these modifications to potentially enhance your App.js file:

  useEffect(() => {
    
    // Locate the title wrapper
    const title = document.querySelector('.sticky-title');
    
    const titleTop = title.offsetTop; // determine the top position of the title block 
                                      // relative to the window's top

    window.addEventListener("scroll", () => {

      console.log("hi", titleTop);
      setScroll(this.scrollY >= titleTop); // when window.scrollY is greater than the top 
                                           // of the title block, set the scroll state to True  
    });
  }, []);

Additionally, make changes in the JSX section of App.js:

<div className="panel" style={{ height: 2000 }}>{/*2000px for easier page scrolling*/}
  ...
</div>

and modify style.css:

.panel {
  width: 200px;
  height: 100vh;
  border: 2px solid black;
  white-space: pre-line;
  /* overflow: auto; */ <---- remove this as it hinders position: sticky from functioning properly
}

React - A guide on accessing the scroll position of a div using JavaScript

Answer №1

Similar questions

Creating a typewriter animation using Tailwind CSS and Next.js

Black screen issue with JW Player on iPad

Calculating the total number of clicks on a button using PHP

nodemon breaks down frequently while anticipating changes in files

What are the steps to ensure HTML5 video fills the entire height and width of the browser window?

What causes padding/margin when using overflow: hidden?

Having trouble debugging JavaScript as a beginner? Unable to pull the cookie value and use it as a variable? Let's

Is it possible to blur all elements of a form except for the submit button?

calculation of progress bar advancement

Is it possible to integrate a personalized theme into react-dates?

The functionality of the submit form is encountering issues upon integration of Ajax requests

JavaScript combined with a dynamic menu, a customized current link style using CSS, and a site built on PHP

Having trouble with RethinkDB filter not returning any matches?

Prevent the execution of useEffect on the client side in Next JS if the data has already been retrieved from the server

Utilizing jQuery to scrape HTML and dynamically manipulate elements

Update a specific ListItem in a List when the key is already present (ReactJS with MaterialUI)

Change the behavior of an onclick event on the second click

What is the method for retrieving a specific value following the submission of an AngularJS form?

Can someone explain why formik forms do not function within material-ui components?

Interactive pop-up text box for data cells in a table