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
ibbhfsmeaf
4,568 PointsWhy wont my nav bar become fixed when scrolling down?
If you go to http://desimara.com and scroll down (or if your window is too large to scroll down, click on the about page and then you'll be able to as there is a lot of text), my sticky header code isn't working. What am I doing wrong?
var $window = $(window);
var $nav = $('#main-navigation');
$window.scroll(function(){
if ($window.scrollTop() >= 119) {
$nav.addClass('fixed-header');
}
else {
$nav.removeClass('fixed-header');
}
});
2 Answers
Ryan Field
Courses Plus Student 21,242 PointsHmmm... I'm not sure, but when I go into your page and manually add the class fixed-header to your #main-naviagation element, it seems to fix it to the top for me? I'm still getting a JS error on your page, though.
As you can see in this pen, what you're doing should work as long as there are no other JS errors.
Ryan Field
Courses Plus Student 21,242 PointsThere is a problem with the setInterval call in your code. If you open your site and look in the console, you'll see that it's encountering an error every few seconds, which may be preventing all of your code from running.
ibbhfsmeaf
4,568 PointsI just checked and you are right about that error, thanks!
However, when I go to the Portfolio page (which is the page running the code that's giving the error), the error goes away yet the fixed header code still doesn't work.