В основном показывая, как вы могли бы достичь более реже навигации в React.
Сначала вам нужно создать файл, а затем назвать его Navbar, добавить импорт из ‘.navbar’ в ваше приложение или домашний компонент, затем перейдите на созданную вами страницу Navbar и вставьте приведенный ниже код
import React from 'react'
import './Navbar.css'
class Navbar extends React.Component {
listener = null;
state = {
nav:false
}
componentDidMount() {
window.addEventListener("scroll", this.handleScroll);
}
componentWillUnmount() {
window.removeEventListener('scroll');
}
handleScroll= () => {
if (window.pageYOffset > 140) {
if(!this.state.nav){
this.setState({ nav: true });
}
}else{
if(this.state.nav){
this.setState({ nav: false });
}
}
}
render(){
return (
);}
}
export default Navbar
Создайте файл CSS и вставьте код реже для CSS, отредактируйте цвет заголовка на свой вкус
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.Nav {
margin-left: -40px;
position: fixed;
z-index: 2;
}
img ~ img {
position: fixed;
right: 10px;
top:8px;
}
.Nav__logo{
margin-top: 12px;
}
.Nav__black{
z-index: 2;
background: rgba(0, 0, 0, 0.95);
width: 100%;
}
Оригинал: “https://dev.to/abodmicheal/sticky-navbar-on-scroll-reactjs-1p4d”