Navigation Bar Effect

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

Both the sticky nav bar and the active tab highlighting require javascript. You could search around and find a jquery plugin to accomplish these tasks pretty quickly, but I’d recommend using it as a learning tool and trying to write it yourself. If you can’t figure it out share your attempts and I’m sure people will point you in the right direction. Start by searching scrollTop and document.querySelector on MDN, that should get the ball rolling. Your site is looking really nice by the way :slight_smile:

2 Likes

you can check this out .

1 Like

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.

The “$” is jQuery specific syntax, and it doesn’t look like you have jQuery linked up. You can either add jQuery and use that syntax, or just use the plain javascript syntax.

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.