I'm currently working on an app using Next and Typescript. The app features a navigation bar at the top of the screen, and I need it to change its style once it reaches a certain point in the view. I attempted to use jQuery for this purpose, but encountered issues with window being undefined during development mode, as well as quirky interactions between Typescript and jQuery. Here is a snippet of the code:
const Home: NextPage = () => {
return (
<>
<nav id="myNav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
<main>
<div id="firstDiv">
{//more code}
</div>
<div id="divToHideNav">
{//more code}
</div>
</main>
</>
);
};
export default Home;
Is there a way to alter the navigation style when it reaches the second div? I'm open to any solution, whether or not it involves jQuery. Thank you in advance!