Search code examples
jquerycssfixedparallax

Navbar stuck to top, margin error?

I've got this problem when i try to stick the navigation bar to the top after i scroll down a little. I'm also using this parallax plugin (don't know if this has anything to with the issue).

My problem is that when i enter my website and scroll down to my footer. Then everything inside my footer gets pushed upwards. When i refresh the page at the bottom the footer is all right (also when i scroll up and down).

So the problem is when i enter the website, and start from the top.

I have two images that displays the issue.

This is how it SHOULD look, everytime i enter the page and scroll down. Also, this is how it looks when i scroll down, and refresh at the bottom (which is right). enter image description here

This is how it DOES look when i enter from start of the page an scroll down. enter image description here

I have figured out it has something to do with when i stick the navigation bar to the top. I do this with jQuery, just adding the class .fixed to it. The .fixed class looks like this:

.fixed {
width:100%;
top:0;
left:0;
z-index:9999;
}

And this is how i do it in jQuery:

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > 350) {
        $('#navigation').addClass('fixed');
    } else {
        $('#navigation').removeClass('fixed');
    }
});

Thanks in advance. I can submit parts of the code if that would help. The website is not online, only local.

Solution

  • I found out what was wrong. I wrapped the navbar in another wrapper, and set a height on that wrapper. Now it works perfect! :)