V podstatě ukazuje, jak byste mohli dosáhnout níže uvedeného navigačního panelu v reakci.
nejprve musíte vytvořit soubor a poté jej pojmenovat Navbar,
přidat
import z '.Navbar'
ve vaší aplikaci nebo domácí komponentě,
poté přejděte na stránku Navbar, kterou jste vytvořili, a vložte níže uvedený kód
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 (
<div>
<div className={`Nav ${this.state.nav && 'Nav__black'}`}>
<img src='imgleftlink'/>
<img src='imgrightlink' />
</div>
</div>
);}
}
export default Navbar
vytvořte soubor css a vložte níže uvedený kód pro css, upravte barvu záhlaví podle svého vkusu
*{
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%;
}