两个"fixed-top"引导 5 个导航栏在页面的不同部分

Question

我有一个登陆页面，页面顶部有一个主导航栏，设置为" fixed-top ";这样当用户向下滚动时导航条就会跟着。在我的[code-pen example](https://codepen.io/njmark88/pen/YzjxxXb?editors=1000)中，我有一个额外的导航条，标签为滚动条。在"号召行动"的顶部;部分。

如何实现以下目标:

一旦主导航栏"到达"滚动条"的位置，我怎么能有主"导航条"?按下滚动条当用户继续向下滚动页面时?

我需要设置"fixed-top"的滚动条相对于"号召行动"的顶部部分，而不是登陆页的顶部。

我试图设置滚动条";fixed-top"而且，不幸的是，它只是对齐到页面的顶部。

Answer 1

我能够在react中使用以下代码解决问题:

const LandingPage = () => {
const fixedScrollbarNav = () => {
(window.pageYOffset > 928) ? document.querySelector(".scrollbar-nav").classList.add("fixed-scrollbar") : document.querySelector(".scrollbar-nav").classList.remove("fixed-scrollbar");
};
React.useEffect(() => {
window.addEventListener("scroll", () => fixedScrollbarNav());
return () => window.removeEventListener("scroll", () => fixedScrollbarNav());
}, []);
return (
<>
<div style={{ overflow: "hidden" }}>
<Navbar />
<SearchBar />
<Scrollbar />
<Cta />
<FeaturedCities />
<Contact />
<Footer />
</div>
</>
)
}
export default LandingPage;

通过在滚动上添加事件侦听器，我能够调用一个函数来添加或删除特定的CSS类，这些类将滚动条的位置从相对位置更改为固定位置和top: 27px

.scrollbar-nav {
position: relative !important;
top: 27px !important;
}
.fixed-scrollbar {
position: fixed !important;
top: 50px !important;
left: 0px !important;
right: 0px !important;
z-index: 99 !important;
}