Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Konrad Pilch
Konrad Pilch
2,435 Points

How can i make this? I just know the basics

HI,

If you look at this website, and when u scroll, his navbar changes, how can i make this? i just know the basics of all.

2 Answers

Chyno Deluxe
Chyno Deluxe
16,936 Points

Looking at the website in dev tools. I see that classes are being added to the nav menu that cause it to be fixed and then display the logo at certain points when scrolling down. The easiest way I could see this being done is first creating your nav with html and css. adding additional classes when the nav is not fixed, is fixed and when the small logo is visible.

You could use a js plugin like sticky.js to stick the nav to the top when you scroll down and then you would need to add a class to then display the smaller logo.

I hope this helps.

Konrad Pilch
Konrad Pilch
2,435 Points

So i believe its the same as doing dynamic display with PHP right? kinda a .

So i have to create extra classes in CSS and or HTML and display them with JS , trakcking the pixel height i think, and then tell them when to disapear and whtat to change?

Id have a look at sticky.js as well.

Thank you .

Chyno Deluxe
Chyno Deluxe
16,936 Points

I am not familiar with PHP but yes, the way you explained it is the way I would be done.

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

Looks like that site is using JQuery, which is a JavaScript library, to change the navigation like that. In most browsers, you can right-click on an element to view the source code. In this case, it's actually reasonably readable - so you can take a look and see exactly how he's achieving that effect.

You'll probably want to take some more JavaScript and JQuery courses if you're interested in creating a similar effect yourself.

Konrad Pilch
Konrad Pilch
2,435 Points

Thank you, im not super interested in JS now, but id learn few things as i go to make sm little effects i like, like the nav bar.

Id have look in $ how to do this, i believe they have made this in a easy way.