How to make a scrolling navbar effect? (I would rather not use jQuery if I can avoid it)

Question

Here's the site so far Basically I want to make the nav bar have the active class on the tab it's on. Let's say you scroll down to the #aboutme div, then I want the active tab there, but if you scroll up into the #programs div, then the active tab switches to there. How would I be able to do this? Also can we please avoid jQuery, would rather not use a library for this. Thanks.

That feature is called `ScrollSpy`, here you have a library made with vanilla js: https://github.com/cferdinandi/gumshoe/ — yuriy636, Jul 15 '17 at 16:35

score 0 · Accepted Answer · answered Jul 15 '17 at 16:43

It is a cross-browser solution provided by @Engineer without using JQuery you can do for detect scroll top distance. Link

var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

Then act in consecuence depending on the position of your header items #aboutme, #programs...

For detect position depends if your item will have fixed position or relative. Giving a look here you will see the function you can use if the item is relative, what is supposed for your case.

Once you got the position from top and you can compare with scroll position just need to add/remove the active class from the item. For that I've just found for you it is what @DanBray purposed.

Edit: Definitely it becomes more predictable if using JQuery.

Peace

You saw every detail was here close. :D – Sam Jul 15 '17 at 16:50 — Sam, Jul 15 '17 at 16:50

How to make a scrolling navbar effect? (I would rather not use jQuery if I can avoid it)

1 Answers1