CODEWITHSUNDEEP
javascriptjqueryscrollnavigationfixed
WeebleWobb
WeebleWobb

Reputation: 179

Fixed Navigation Flickering

Scenario: I have built a fixed navigation function that adds a class to the header once the scroll is greater or equal to 200px, the height of the nav.

Issue: Although the function executes properly, on certain screen sizes the navigation tends to flicker and deny the function to properly run. I'm not sure if it is because the bottom of the window does not exceed 200px?

Desired: I would like the navigation to properly execute the sticky nav function regardless of screen size.

Question: What is the issue in my jquery conditional? Does it have to do with the .scrollTop() function?

Note: Here is a screen capture of the navigation bug: Error Capture

JS Code:

// Side navigation Sticky function
$(window).scroll(function() {
    var top = $(window).scrollTop();

    if(top >= 200) {
        $('header').addClass('navbar-fixed-top')
    } else {
        $('header').removeClass('navbar-fixed-top')
    }
});

Here is the link to the prototype: JSfiddle

Upvotes: 0

Views: 850

Answers (1)

Sylogista
Sylogista

Reputation: 585

That's because of your else section. Scenario is: 1. adding class 2. Not enough tall page's now lower. 3. if isn't true anymore 4. It's executing your else section. 5. Page is again tall enough...

You should implement something that can block else. Maybe check something like "onbottom"? Like this

Upvotes: 1

Related Questions