Hello everyone, just created a scroll menu Highlight, when the user scrolls the page the menu links will change color link, i created this method with and addEventListener, scroll, and calling the function HighlightLinks and making them with if else statment pageYOffset in every point on scroll. You can find the working product in codePen link
Note:
I will like to know another efficient way of doing it instead of if else or other method. Thanks, must be Vanilla JS
The problem you have here is that you’ve hard coded heights. You’ve based it on a specific screen size. So as soon as the viewport size changes, the highlighting breaks - for example, if I view it on mobile.
Well for one, as said, you are hard-coding the position. You need to do some calculations instead.
I can’t off the top of my head give you the right way of doing it, but if you search for it I’m sure there are examples, or you can look at the source code of some plugins
It is something like this
window.pageYOffset === element.offsetTop
Check this video out, it also deals with debouncing the scroll
Hi, there… yes i believe, that as well, so i can actually do a element target for each section so it wont have a problem with the view window… Let me know, and also if this is possible doing it without if else?
Yes i actually learned quit a bit, doing this scroll functionality. Although its true i can target probably an element on the page and make it happen, and if there is another way without doing if else statements.
I think what he means is if the section with id="about" is at the top of your page then your code looks up the nav link with attribute href="#about" to highlight it.
I found your project inspiring so I forked it and have burnt up the better part of the night playing with homegrown scrollspy. Good fun. Thanks for sharing that.
Hi alhazen1, thank you so much for the tips, and i will try to work on it… thanks for letting me know that this project its good and fun, thanks for it. Let me know what are you building, so we can share our knowledge. Thanks!!!