在react-fullpage.js中只设置不同状态的导航

Question

我想做一个网站，我想登陆页(导航头)的第一节有一个透明的背景。其余页面不需要透明背景。

着陆页是使用fullPage.js构建的。我试过使用滚动事件，但它似乎不支持fullPage.js。我怎么能应用一个单独的CSS风格，只是一个部分使用fullPage.js?

我在React的App.js中添加了当前的Header组件代码，并且令人困惑的是，只有一个状态用于第一个着陆页的section的Header。

function App() {
return (
<>
<Header />
<Routes>
<Route path='/' element={<MainPage />} />
<Route path='/company' element={<IntroPage />} />
<Route path='/technology' element={<TechnologyPage />} />
<Route path='/products' element={<ProductsPage />} />
<Route path='/RnD' element={<RnDPage />} />
<Route path='/support' element={<SupportPage />} />
<Route path='/login' element={<LoginPage />} />
<Route />
<Route />
</Routes>
<Footer />
</>
);
}
export default App;

Answer 1

可能有更好的解决方案，但我唯一能想到的是使用两个不同的头。一个在需要透明的页面上，另一个在休息的页面上。给他们不同的ID，并在你需要的地方设置为透明。