我想在导航栏中使用滚动效果。当滚动大于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;
您可以看到滚动条位于顶部,并显示彩色导航栏。这是我从底部滚动到顶部的时候。
以下是截图
答案 0 :(得分:0)
删除indexOf检查解决了问题,但我不知道为什么。有人可以解释一下吗?