When located on a specific section of the page, I need to highlight the button in the navbar that relates to it using JavaScript

Question

I have a landing page and on it I have multiple sections which are linked to from the navbar menu. I need to use JavaScript in order to identify which section is in view right now and highlight the related button in the navbar, and then to stop highlighting that button once the user moves to a different section. Here's my GitHub link with my current code - https://github.com/markyana/udacity-landing-page I don't understand how I can accomplish this Thank you in advance

Would this post help you? https://stackoverflow.com/questions/20791374/jquery-check-if-element-is-visible-in-viewport — Prebiusta, Jun 12 '21 at 22:44
What you want to achieve is a **scrollspy**, the idea of those is you check the currently scrolled location and check which id is in the top of the viewport... I would suggest using a ready plugin/library for that or just search for scrollspy examples to make your own — Ant, Jun 12 '21 at 23:13
Look into IntersectionObserver. Also could you put your code (at least enough so we get the idea) into your actual question. See [link]https://stackoverflow.com/help/minimal-reproducible-example — A Haworth, Jun 13 '21 at 18:04

score 0 · Answer 1 · edited Jun 14 '21 at 07:43

0

You might find this article helpful: https://www.javascripttutorial.net/dom/css/check-if-an-element-is-visible-in-the-viewport/

You would basically use a helper function to check if the distance from the top and left, bottom and right of the viewport using element.getBoundingClientRect()

edited Jun 14 '21 at 07:43

shaedrich

5,457
3
26
42

answered Jun 13 '21 at 01:45

Ducksome

39
1
2

When located on a specific section of the page, I need to highlight the button in the navbar that relates to it using JavaScript

1 Answers1