Adding a className on scroll?

Question

How can I add a className when the page scrolls? I have ready many other articles and answers to this (may be a duplicate) but none have helped me understand what is wrong with my code below.

If the code is not the issue I believe that it stems from a perspective wrapper around the app that may disallow the registration of scroll. How can I add the event listener to register scroll on id=container

constructor(props) {
  super(props)
  this.state = {
      isStuck: true,
  }
this.handleHeaderStuck = this.handleHeaderStuck.bind(this)
}

componentDidMount () {
  window.addEventListener('scroll', this.handleHeaderStuck);
}

componentWillUnmount () {
  window.removeEventListener('scroll', this.handleHeaderStuck);
}

handleHeaderStuck() {
  if (window.scrollY === 0 && this.state.isStuck === true) {
      this.setState({isStuck: false});
  }
  else if (window.scrollY !== 0 && this.state.isStuck !== true) {
      this.setState({isStuck: true});
  }
}

render() {

  return (
    <main className={this.state.isStuck ? 'header-stuck' : ''}>
       ...
    </main>

This screenshot reassures me that the issue is with the registering of onScroll listener

In the constructor, initialize isStuck: false. When it is set to true the first time you start scrolling, none of the conditions will be true and so the state never updates. — Hoyen
– Hoyen, Commented Mar 29, 2018 at 13:51

Andrii Starusiev · Accepted Answer · 2018-03-29 13:42:12Z

1

Be sure your component have enough height for scroll. Your code works. Add some height to main and check it.

main {
  height: 2000px;
}

https://jsfiddle.net/69z2wepo/156204/

answered Mar 29, 2018 at 13:42

Andrii Starusiev

7,7942 gold badges31 silver badges40 bronze badges

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

4 Comments

Darren Over a year ago

Thank you Andrew. I thought and figured as much - unfortunately setting the height is a no-go too. I think it is due to several factors relating to being within a container of an offscreen menu. I am trying to find a way to set the scrollY to a certain div id="container", do you know any?

Darren Over a year ago

Yes, just by simply logging the scrollY position const scrollpos = window.scrollY console.log(scrollpos); in my app I get 0 always. In your jsFiddle you get the position always registering. I think I need to open another question relating more to scrollY. Thanks for your help.

Darren Over a year ago

Just incase you were interested - my issue as just uncovered was due to overflow: hidden; being applied to the body. It was meant to only be applied during modals but I messed that up. Thanks again.

Andrii Starusiev Over a year ago

Oh, it happens) I am glad to help you find the issue.

Shubham Khatri · Accepted Answer · 2018-03-29 12:17:06Z

1

You code has an issue, onScroll is attached a listener function handleScroll whereas the function is handleHeaderStuck in your case. Change the listener to execute the correct function.

componentDidMount () {
  window.addEventListener('scroll', this.handleHeaderStuck);
}

componentWillUnmount () {
  window.removeEventListener('scroll', this.handleHeaderStuck);
}

answered Mar 29, 2018 at 12:17

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

3 Comments

Darren Over a year ago

Whoops - thanks. This was more of a copy paste issue when adding to the question. My app is running with your suggestion and not the issue. I will change my question. Cheers.

Shubham Khatri Over a year ago

@Darren, do you mean that the problem is still there or is it solved

Darren Over a year ago

Problem is still there. When adding the code to my question I copied and pasted from an old file. The app does not work with the suggestion.

Collectives™ on Stack Overflow

Adding a className on scroll?

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related