javascript - 用于显示导航的 React.js 滚动阈值

Question

另一个开发人员使用 React.js 编写了这段代码来切换名为 ArticleNav 的导航元素的外观。它会在您向下滚动时显示出来，但在您向上滚动时会隐藏起来。

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});
    }
  }
}

效果很好，但是 if (window.scrollY >= firstTextElement.offsetTop) 的使用使这种来回跳跃太快了，我想创建一个，比方说...，50px确认用户实际上是在相反方向滚动的阈值。

你们对如何处理这个问题有什么建议吗？与 React 相比，我更喜欢 jQuery，所以我所有的正常修复都不会在这里完全翻译。

Answer 1

我觉得我遗漏了您问题的一部分。不能简单地向 firstTextElement.offsetTop 添加 50 像素吗？

window.scrollY >= firstTextElement.offsetTop + 50