As I work on building a HTML website, I encountered an interesting challenge. I want to create a dynamic feature where, as users scroll through the page, certain sections are highlighted in the navigation menu based on their view. While I have managed to achieve this functionality with JavaScript/jQuery, I faced a minor issue.
The problem arises when a user clicks on a link within the navigation menu. Although it successfully takes them to the corresponding section, the highlighting of the active link does not update unless the page is scrolled again.
If you require further clarification or assistance, please don't hesitate to ask.
-EDIT: The scrolling aspect is working correctly, but clicking on the links only highlights some of them-
Thank you all for your help and any guidance provided would be greatly appreciated.
Here is the code snippet (It's recommended to view it in full screen/full page):
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
/* CSS Styles */
</style>
</head>
<body>
<div id="mySidebar" class="sidebar" style="width: 250px;">
/* Sidebar Content */
</div>
<div id="main" style="margin-left: 250px;">
/* Main Content */
</div>
<script>
/* Scripts */
</script>
</body>
</html>