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 Geert Van Campenhout
Geert Van Campenhout
7,308 Points

How to make a fixed navigation like this one?

Hello fellow students!

Does anyone have experience in building a navigation like this banff website has: http://www.banff.be/en/

First it has a nice welcoming picture, afterwards the navigation follows and scrolls up until it hits the top of the page - there is stays in a fixed position for the rest of the page. If anyone knows the name of this technique, I'ld like to do more research about it.

Thanks a lot

3 Answers

Konrad Pilch
Konrad Pilch
2,435 Points

Hi, you have an youtube tutorial here if that helps.

It's smething like fixed navigation on top when scrolling , jQuery/JS.

Billy Bellchambers
Billy Bellchambers
21,689 Points
Billy Bellchambers
Billy Bellchambers
21,689 Points

In this example it looks like there are using WordPress to building this site.

But the basic css settings to create a sticky menu bar from this site seems to be.

.menu {
  position: fixed;
  top: 0px;
}

I would guess this is being applied to the element via JavaScript once the page is scrolled a certain distance. Giving the effect that the scroll is picking up the menu at sticking it to screen as it goes.

anil rahman
anil rahman
7,786 Points
anil rahman
anil rahman
7,786 Points

When you first start scrolling there is a cool effect happening where the page is moving up separate from the background, this is called parallax.

Maybe they are using something else to choose when to start the fixed header scroll point but to make a nav fixed and scrollable like that is just basic css. The main part being the position: fixed property.