CODEWITHSUNDEEP
jqueryhtmlcss
Alexiz Hernandez
Alexiz Hernandez

Reputation: 579

Sticky navbar not positioning correctly

I have a navbar that I want to stick to the top of the screen when I scroll past it's top coordinates. I am trying to achieve this by adding a class to it using this:

$(document).ready(function() {
    $(window).scroll(function() {
        console.log($(window).scrollTop());

        if ($(window).scrollTop() > 800) {
            $('#nav').addClass('nav-fixed');
        }

        if ($(window).scrollTop() < 801) {
            $('#nav').removeClass('nav-fixed');
        }
    });
});

and this is the class that I am adding:

.nav-fixed {
    top: 0;
    position: fixed;
}

This is before scroll: before

This is after scroll: enter image description here

Upvotes: 1

Views: 44

Answers (1)

Rich
Rich

Reputation: 5721

Try adding width: 100%

.nav-fixed {
    top: 0;
    position: fixed;
    width: 100%;
}

Upvotes: 2

Related Questions