Navbar Not Switching To Fixed When I Scroll By It

Question

For reference here is the url http://buildme.co/

I am currently having a issue with my main navbar not switching to fixed as you scroll by it. This is the navbar under the skewed images.

The Following JavaScript code is supposed to be making it do this

// Change To Fixed Header
$(document).ready(function(){
    $(window).bind('scroll', function() {
        var navHeight = $( window ).height() - 100;
        if ($(window).scrollTop() > navHeight) {
            $('.main-navbar').addClass('navbar-fixed-top');
        }
        else {
            $('.main-navbar').removeClass('navbar-fixed-top');
        }
    });
});

However this is not the case and nothing happens.

Here is a example of what I am trying to achieve. http://stanislav.it/tutorials/sticky-navigation/

Answer 1

It looks like you may need to bind the scroll event to the 'body' in your case (the window scroll event wasn't firing when I checked it on your site but the body was)

Edit: Oh wait I think I see...It's the overflow styling you've added to html, body:

html, body {
    overflow-x: hidden;
    height: 100%;
}

if I get rid of the overflow-x: hidden your code works for me. I know I've had trouble before with the fact that it's not allowed to have one axis allow overflow and the other not (so if you set overflow-x: hidden it may do funny things with the y scrolling)