Another Efficient Way of writting scroll Menu on vanilla JS

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

https://codepen.io/ivanmt07/pen/pxONrw

2 Likes

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

Hard-coding aside that’s still a great little study in scrolling and I’m sure you have already learned quite a lot about window events.

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.

You can check if an element is at the top of the screen. Generally, the process is something along the lines of:

  • Give all your sections the same class.
  • Give all your sections their own ID
  • Give each of the nav items an href of that ID
  • Give the first nav item an active class
  • Have the document set up to listen to the scroll event. When scroll happens:
  • If a section is in view, ie it’s at the top of the screen, highlight the nav item that has an href that matches the id.
  • Highlight by removing the active class from all the sections and adding it back on the one you want.

Hello Dan,

i do not get your bullet point #6 what do you mean by dad. Dont get it how would i do that ? i will just need that to actually make it work… thanks.

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!!!