Question

我想在导航栏中使用滚动效果。当滚动大于140时，应显示另一个导航，如果小于140，则应显示透明导航栏。我在componentDidMount生命周期内实现了滚动功能。滚动效果有效但不是预期的。我必须多次向下滚动以查看效果，当我向下滚动到140以上并再次向上滚动时，我仍然看到透明导航栏中的彩色导航栏。

这是我的代码

class Navbar extends React.PureComponent {
  componentDidMount() {
    window.addEventListener('scroll', this.handleScrolling.bind(this));
  }

  handleScrolling(e) {
    let scrollTop = e.srcElement.body.scrollTop;
    if (scrollTop > 140) {
      if (this.el.className.indexOf("open") === -1) {
        console.log('not open');
        this.el.classList.add("open");
      } else {
        if (this.el.className.indexOf("open") > -1) {
          console.log('closed');
          this.el.classList.remove("open");
        }
      }
    }
  }
  render() {
  return (
    <div className="navbar navbar-inverse navbar-fixed-top" ref={(el) => this.el = el}>
      <div className="container">
        <div className="navbar-header">
          <button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span className="icon-bar"></span>
            <span className="icon-bar"></span>
            <span className="icon-bar"></span>
          </button>
          <a className="logo" href="index.html"><img src={logo} alt="Logo" /></a>
        </div>
        <div className="navbar-collapse collapse">
          <ul className="nav navbar-nav navbar-right">
            <li><a href="#home" className="scroll">HOME</a></li>
            <li><a href="#">DRIVER</a></li>
            <li><a href="#">BRAND</a></li>
            <li><a href="#">JOIN NOW</a></li>
            <li><a href="#">SIGN IN</a></li>
          </ul>
        </div>
      </div>
    </div>
  );
}
}

export default Navbar;

您可以看到滚动条位于顶部，并显示彩色导航栏。这是我从底部滚动到顶部的时候。

以下是截图

Answer 1

删除indexOf检查解决了问题，但我不知道为什么。有人可以解释一下吗？

滚动无法按预期工作

1 个答案: