So I managed to make a sticky nav and it works pretty well, but I’m having an issue where when it gets to the top of the page it gets pushed over to the left, and doesn’t line up with the rest of my content.
I could be wrong, but think it’s because once it gets past that certain point and the addClass function adds the new class to keep the nav fixed it also gets rid of my “container-fluid” bootstrap helper class.
Is there anyway to fix this? Any help would be awesome. Thanks guys.
Change your code to this:
var mn = $(".main-nav");
$(window).scroll(function(){
if ( $(this).scrollTop() > 710) {
mn.addClass(“main-nav-scrolled”);
mn.css(“left”, $("#about").offset().left + “px”);
console.log($("#about").offset().left);
}
else {
mn.removeClass(“main-nav-scrolled”);
mn.css(“left”, “0px”);
}
});
Wow awesome! Thanks a lot. It’s getting pushed to the right when you scale down the window now though this things a pain.
I’m using Safari…i started looking at your page in Web Inspector and could see the offsets getting added by the JS. Whatever browser you’re using should have a similar tool for troubleshooting. I didn’t see it before the javascript was added, but it seems likes there’s still some minor issues at smaller screen sizes.