0
Я хочу иметь эффект прокрутки в моем навигаторе. Когда прокрутка превышает 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;
Вы можете увидеть полосы прокрутки в верхней части и цветной Navbar показано. Это когда я прокручиваю сверху вниз.
Вот скриншот
