0
私のナビゲーションバーにスクロール効果があります。スクロールが140より大きい場合、別のナビが表示され、140より小さい場合は透明なナビゲーションバーが表示されます。私はcomponentDidMountライフサイクル内にスクロール機能を実装しました。スクロールエフェクトは機能しますが、エクスペクトされません。私は効果を見るために何度も下にスクロールする必要があり、140以上にスクロールして再びスクロールすると、まだ透明なnavbarで着色されたnavbarが表示されます。スクロールが期待どおりに機能していない
は、ここでは、スクロールバーが一番上にあり、色のナビゲーションバーが表示されている見ることができます私のコード
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;
です。それは私が底から上にスクロールしているときです。ここで
のindexOfのチェックを外すスクリーンショット
