CODEWITHSUNDEEP
javascripthtmlcssreactjs
Pushpendra Yadav
Pushpendra Yadav

Reputation: 219

React - How to get the scroll position of a div in JS

I have a side nav bar having a title and some other info inside of it, title name is sticky, and the side panel is acquiring height of 100vh. I want my title div (sticky-title) to have box-shadow only when user scrolls down (when the context is greater than 100vh). In other words, box-shadow property initially should not be there, but it should come up when the user scrolls down the page. I tried triggering scroll EventListener but it is taking the main window's scroll position though I want the scroll position of my sidebar div to be considered.

Below is code sandbox playground link to the same.

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

Upvotes: 1

Views: 6534

Answers (1)

despotes
despotes

Reputation: 411

See if this changes can help you in App.js:

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

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

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

also in the JSX portion of App.js:

<div className="panel" style={{ height: 2000 }}>{/*2000px to scroll the page easier*/}
  ...
</div>

and style.css:

.panel {
  width: 200px;
  height: 100vh;
  border: 2px solid black;
  white-space: pre-line;
  /* overflow: auto; */ <---- delete this because it prevents position: sticky to work
}

Upvotes: 1

Related Questions