Change style of header component on scroll on home page only in React.Js

Question

I have used the following approach to change the style of my header on scroll which is working fine. Referred this answer

  state = {
    scrolled: false
  };

  componentDidMount() {
    window.addEventListener('scroll', () => {
      const isTop = window.scrollY < 84
      if (!isTop) {
        this.setState({
          scrolled: true
        })
      } else {
        this.setState({
          scrolled: false
        })
      }
    })
  }

  componentWillUnmount() {
    window.removeEventListener('scroll')
  }

The problem is that it works on every route(component) as I have the header component included in the App.js file but I want it to work specifically on the Home page only.

Is there a way to check the current route and perform this transition on header, only for the home component which will work with my current approach or do I need to change my approach altogether?

use `window.location.pathname` to conditionally add this listener — dixitk13, Mar 11 '20 at 08:30
@dixitk13 This doesn't work as the componentDidMount() is only called once and the location.pathname doesn't update even if the route changes. — Ankush Chauhan, Mar 11 '20 at 08:56

score 1 · Accepted Answer · answered Mar 11 '20 at 08:48

You should create a method for handling scroll and refer it in both addEventListener and removeEventListener. But in your example, you are not referring it. You can use it like the below code sample.

And you should use a condition to match URL that works only on home page.


state = {
    scrolled: false
  };

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }
  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll = () => {
    const isTop = window.scrollY < 84
    if (!isTop) {
      this.setState({
        scrolled: true
      })
    } else {
      this.setState({
        scrolled: false
      })
    }
  })

I have put the check to match URL inside the componentDidUpdate(), but it doesn't seem to work. Am I doing this wrong? — Ankush Chauhan, Mar 11 '20 at 09:37
add the condition check in `handleScroll` function, if condition is false return immediately — Ravichandran, Mar 11 '20 at 09:39

score 0 · Answer 2 · answered Mar 11 '20 at 08:41

Hi you could use React Router's location for this use case and check in its pathName property where you are currently routed in your app.

Also be aware that binding function to scroll events can be very costly performance-wise -just add a console log and scroll and you'll see that it's being called a lot - and you'd like to prefer either another solution depending on what you're trying to achieve.

If you can't avoid passing a function to your scroll events you could use libraries such as RxJS or Lodash to debounce the function calls and avoid that it's being called too many times for nothing and potentially impact your performances.

https://www.learnrxjs.io/learn-rxjs/operators/filtering/throttle

https://www.learnrxjs.io/learn-rxjs/operators/filtering/debounce

https://lodash.com/docs/4.17.15#debounce

Depending on what you're trying to achieve you could also use the native Intersection Observer which is already optimised.

Yes, Intersection Observer might be a better option. Just saw [this](https://www.youtube.com/watch?v=RxnV9Xcw914) video, but can you throw some light on how this can be achieved in React as the DOM nodes concerned (Header and node to be observed) are in different components. — Ankush Chauhan, Mar 11 '20 at 12:41
Here's an article showing you how https://medium.com/the-non-traditional-developer/how-to-use-an-intersectionobserver-in-a-react-hook-9fb061ac6cb5 — t3__rry, Mar 11 '20 at 13:35

Change style of header component on scroll on home page only in React.Js

2 Answers2