CODEWITHSUNDEEP
javascriptjqueryhtmlcssnav
raydg
raydg

Reputation: 75

Scroll down then fixed navigation glitch

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");
    }
});

enter image description here

Upvotes: 0

Views: 492

Answers (1)

Venkata Krishna
Venkata Krishna

Reputation: 1776

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.

Upvotes: 2

Related Questions