ReactJS 滚动时导航栏粘性

基本上展示了如何在 react 中实现下面的导航栏。

首先，您需要创建一个文件，然后将其命名为 Navbar，在您的 App 或 Home 组件上
添加
从“.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 (
    <div>
    <div className={`Nav ${this.state.nav && 'Nav__black'}`}>
    <img src='imgleftlink'/>
    <img src='imgrightlink' />
    </div>
    </div>
  );}
}
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