React.js Scroll Threshold for Revealing Navigation

Question

Using React.js, another dev wrote this code to toggle the appearance of a navigation element called ArticleNav . It reveals itself as your scrolling down but hides itself when you scroll back up.

onScroll: function () {
  var mainColumn = document.getElementsByClassName('main-column')[0];
  var firstTextElement = mainColumn.querySelector('.dek');
  if (!firstTextElement) {
    firstTextElement = mainColumn.querySelector('.body-text');
  }

  if (window.scrollY >= firstTextElement.offsetTop) {
    if (!this.state.hideForArticleNav) {
      this.setState({hideForArticleNav: true});
    }
  } else {
    if (this.state.hideForArticleNav) {
      this.setState({hideForArticleNav: false});
    }
  }
}

This works great but the use of if (window.scrollY >= firstTextElement.offsetTop) makes this jump back and forth too rapidly and I wanted to create a, let's say..., 50px threshold to confirm that the user is actually scrolling in the opposite direction.

Do y'all have any recommendations on how to approach this? I am more jQuery-minded than React, so all of my normal fixes don't exactly translate here.

Answer 1

I feel like I'm missing part of your question. Can't you simply add 50 px to the firstTextElement.offsetTop ?

window.scrollY >= firstTextElement.offsetTop + 50

Answer 2

It sounds like you have a good setup to determine whether the user is scrolling up or down, so instead of setting this.state.hideForArticleNav you could set this.state.lastDirectionChangeOffset to the current window offset when the direction changes. Then you can check against that state value to see if it's +/- 50px.

onScroll: function () {
  var mainColumn = document.getElementsByClassName('main-column')[0];
  var firstTextElement = mainColumn.querySelector('.dek');
  if (!firstTextElement) {
    firstTextElement = mainColumn.querySelector('.body-text');
  }

  if (window.scrollY >= firstTextElement.offsetTop) {
    if (!this.state.hideForArticleNav) {
      this.setState({ lastDirectionChangeOffset: window.scrollY });
    }
  } else {
    if (this.state.hideForArticleNav) {
      this.setState({ lastDirectionChangeOffset: window.scrollY });
    }
  }

  if (window.scrollY > this.state.lastDirectionChangeOffset + 50) {
    this.setState({ hideForArticleNav: true })
  } else if (window.scrollY < this.state.lastDirectionChangeOffset - 50) {
    this.setState({ hideForArticleNav: false }) 
  }     
}