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 Tiffany McAllister
Tiffany McAllister
25,806 Points

Help with sticky navigation

I'm working on a project using Bootstrap where the navigation bar has to be fixed to the top of the page in viewports below 768px.

On viewports above 768px, the navigation bar will initially be stuck to the bottom of the viewport but scrolls with the page until it reaches the top of the screen. Once it reaches the top of the screen it will become fixed.

I have got it working pretty much how I want it to, however, it's displaying some buggy behaviour when I resize the screen and scroll etc.

Can anyone please take a look at my code and see where I'm going wrong? Any help would be very much appreciated :)

http://codepen.io/tiffmc/pen/LVMxqG

1 Answer

LaVaughn Haynes
LaVaughn Haynes
12,397 Points

Is this how you are trying to get it or am I way off? http://codepen.io/drbrounsuga/pen/vOwERN

1 change made in CSS, a few minor changes made to javaScript. Contains comments by changes so you can see what I modified

Tiffany McAllister
Tiffany McAllister
25,806 Points

Thank you so much, LaVaughn! You are awesome :) That's exactly what I couldn't figure out haha. I'm still trying to wrap my head around JavaScript.

One more thing, is there any way to stop the navbar from disappearing when I resize the window on screens above 768px? It disappears and doesn't appear again until I scroll. Not that it's a huge issue or anything :)

LaVaughn Haynes
LaVaughn Haynes
12,397 Points

I couldn't figure it out. There seems to be other code that's not showing... I feel like I'm missing something. Anyway, I personally think it would be easier to handle the width break point with CSS. I rebuilt a basic example. It works. I just prefer javaScript doing as little manipulation as possible.

http://codepen.io/drbrounsuga/pen/wabMbP