React 分页和阻塞滚动事件监听

Question

我不知道为什么，但是my page 被 React.js 库分割，如果你在鼠标悬停在顶部导航菜单时尝试向下滚动，你将无法这样做。

但是，如果您在屏幕的任何其他部分向下滚动，您将完全可以滚动。

现在我一直在尝试使用事件监听器，滚动会改变菜单背景，跟随这个question 它只是不起作用，因为反应已经把我的页面分成两部分，一部分是菜单， other 是页面的其余部分。

菜单.js

import React from "react";
import './css/menu.css';
import logo from './images/logo.png'

export default class Menu extends React.Component{
    state ={className:"" };
    componentDidMount(){
      window.addEventListener("scroll", this.handleScroll);
      console.log(this.state.className);
    }
    
    handleScroll=()=>{
      if (window.pageYOffset > 0) {
          if(!this.state.className){
            this.setState({ className: "blue" });   
            console.log('added');
          }
      }else{
          if(this.state.className){
            this.setState({ className: "" });
            console.log('removed');
          }
      }
     
    }
    render(){
      return(
        <header id="navbar" className={this.state.className}>
            <nav role="navigation">
                <div className="logo">
                    <img src={logo} alt="Triple V logo - עיצוב ופיתוח אתרים" />
                </div>
                <ul>
                    <li>
                        <a href="#">דף הבית</a>
                    </li>
                    <li>
                        <a href="#">קצת עלינו</a>
                    </li>
                    <li>
                        <a href="#">השירותים שלנו</a>
                    </li>
                    <li>
                        <a href="#">תיק עבודות</a>
                    </li>
                    <li>
                        <a href="#">מגזין מקצועי</a>
                    </li>
                    <li>
                        <a href="#">צור קשר</a>
                    </li>
                </ul>
            </nav>
        </header>
      );
    }
  }

App.js

import React from "react";
import Home from './pages/home/home.js';
import Menu from './menu.js';
import './App.css';
function App() {
  return (
    <div>
      <Menu/>
      <Home/>
    </div>
  );
}
export default App;

如何防止这种划分并启用整页滚动以确保事件滚动侦听器正常工作？

Answer 1

菜单的 z-index 显然高于页面的其余部分，因此将标题上的 z-index 更改为 0 应该可以解决问题。