Two "fixed-top" bootstrap 5 navbars at different sections of the page - alignment

Question

I have a landing page where there is one main navigation bar at the top of the page that is set to "fixed-top" so that the navbar follows as the user scrolls down. In my [code-pen example](https://codepen.io/njmark88/pen/YzjxxXb?editors=1000), I have an additional navbar labeled "scrollbar" on top of the "Call To Action" section.
How can I achieve the following:
Once the main "navbar" reaches the position of the "scrollbar", how can I have the main "navbar" push down the "scrollbar" as the user continues to scroll down the page?
I need to set "fixed-top" of the "scrollbar" relative to the top of the "Call To Action" section, not the top of the landing page.
I attempted to set the "scrollbar" to "fixed-top" as well, unfortunately that just aligns it to the top of the page.

Answer 1

I was able to solve the issue with the following code in 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;
By adding an event-listener on scroll, I was able to call a function that adds or removes specific CSS classes that change the position of the scrollbar from relative to fixed and 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;
}