Scroll down then fixed navigation glitch

Question

I have this glitch that is bothering me. The problem is that my navigation is not working properly as I wanted it to be. It jumps even though I have not reached the top of my nav or after passing the height of my header with scrollTop value. I recreate the problem in jsfiddle .

var header_height = $('header').height();
//var main_nav = $('nav');
$(document).scroll(function () {
    if ($(this).scrollTop() >= header_height) {
        $('nav').addClass("fixed");
    } else {
        $('nav').removeClass("fixed");
    }
});

Answer 1

Instead of taking the height of header, you should be taking the top of .main_nav to compare with ScrollTop.
Change the first line in the code you posted above to:

var header_height = $('.main_nav').position().top;

That should work. Here is the working fiddle.

Hope this helped.