Hi everyone I’m working on the portfolio front end project. I implemented my desired effect with the nav bar + my other sections(about…contact) scrolling passed my name banner. I was wondering how to fix the nav bar after it reaches the top when a user scrolls downwards. I want to implement an active tab so users know which sections they are in as well.
Thank you all so much! First I realized I had my navbar with my contents and I’ve separated them in my css and html code since last time.
So I’ve went through a couple of resources and tried to pick up on a few things.
My approach is to get the number of pixels scrolled through (since it is hidden) via element.scrollTop then set a condition for it > 20pixels… then I put an if and else statement to add or remove the classes.
I’ve tried several variations of this approach but I still can’t seem to get it to work.
You’ve got the right idea, though, you need to check the scroll position and add your class when it reaches the desired spot. But right now you’re only calling the function once when the document loads, you need to have it re-check the condition each time the scroll position is changed. Take a look at event listeners to help with this.