Sticky nav bar flickers when scrolling slowly

Question

I’m currently stuck on an issue that’s happening with our sticky nav.

When a user scrolls down the screen very slowly our second navigation which is a sticky nav, flickers for some reason. I don’t know what it could be.

I’ve tried adding “-webkit-transform: translateZ(0);” to the “.affix” and ".affix-top" classes with no luck.

This issue is only happening on Chrome and Edge. Firefox, IE11 and Safari this issue does not occur thankfully.

What's causing this? How can/if this be resolved?

Link to live page here.

Here’s the JS to the sticky nav:

$( document ).ready(function(){
$('.full-width-anchorLinks').parent().addClass('full-browser-width-wrap');

if( $(".sticky").length ) {
    var $navbar = $(".sticky");
    var scrollTop     = $('body').scrollTop(),
        elementOffset = $navbar.offset().top,
        distance      = (elementOffset - scrollTop),
        anchor        = Math.round(distance);

    $navbar.affix({offset: {top: anchor} });

    var scrollSpyOffsetTotal = 0;
    // Header Height: onLoad (Use mainly for when scrollTop is 0)
    if ($(".globalHeaderV2, .consumerHeaderV2").length) {
        var headerHeight = $('.globalHeaderV2, .consumerHeaderV2').height();
        scrollSpyOffsetTotal += headerHeight;
    }
    // Nav Container Height: on page scroll
    if ($(".navbar-main-fixed, .nav-container.sticky").length) {
        var navContainer = $('.navbar-main-fixed, .nav-container.sticky').height();
        scrollSpyOffsetTotal += navContainer;
    }

    if ($(".affix-top, .affix").length) {
        var affixHeight = $('.affix-top, .affix').height();
        scrollSpyOffsetTotal += affixHeight;
    }

    if ($(".breadcrumb").length) {
        var breadcrumbHeight = $('.breadcrumb').height();
        scrollSpyOffsetTotal += breadcrumbHeight;
    }

    //If sticky breadcrumbs exist and tablet/desktop view point,
    $('body').addClass('scroll-main').scrollspy({target: '.navbar', offset: scrollSpyOffsetTotal});

    //On scroll change the top position of '.affix' based on sticky main nav and sticky breadcrumbs
    $(window).scroll(function() {
        var totalOffset = 0;

        // Old consumer (forhome)/Business Header
        if ($(".navbar-main-fixed").length) {
            var navHeight = $(".navbar-main-fixed").height();
            totalOffset += navHeight;
        }

        // Consumer Header
        if ($(".nav-container.sticky").length) {
            var consumerNavHeight = $(".nav-container.sticky").height();
            totalOffset += consumerNavHeight;
        }

        if ($(".breadcrumb-fixed").length) {
            var breadcrumbHeight = $(".breadcrumb-fixed").height();
            totalOffset += breadcrumbHeight;
        }

        if ($(".sticky-sem-header").length) {
            var semHeaderHeight = $(".sticky-sem-header").height();
            totalOffset += semHeaderHeight;
        }

        // Desktop
        if ($(window).width() >= 1024) {
            $(".affix").css("top",totalOffset+"px");
        } else if ($(window).width() < 1024) {
            var mobileNavHeight = $('.navbar-main-fixed, .nav-container.sticky').height();
            $(".affix").css("top",mobileNavHeight+"px");
        }
    });
}

// Add smooth scrolling on all links inside the navbar
$(".anchorLinks a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
        // Prevent default anchor click behavior
        event.preventDefault();

        // Init destination var
        var dest = 0;
        var hash = this.hash;
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        var headerHeight = 0;
        var navContainer = 0;
        var breadcrumbHeight = 0;

        // Header Height: onLoad (Use mainly for when scrollTop is 0)
        if ($(".globalHeaderV2, .consumerHeaderV2").length) {
            headerHeight = $('.globalHeaderV2, .consumerHeaderV2').height();
        }
        // Nav Container Height
        if ($(".navbar-main-fixed, .nav-container.sticky, .nav-sticky-wrapper").length) {
            navContainer = $('.navbar-main-fixed, .nav-container.sticky, .nav-sticky-wrapper').height();
        }

        // Affix (sticky nav)
        var affixHeight = $('.affix, .affix-top').height();

        if (scrollTop === 0) {
            // Desktop
            if ($(window).width() >= 1024) {
                if ($(".breadcrumb").length && ($(".breadcrumb ul.crumbs").css("display") != "none")) {
                    breadcrumbHeight = $('.breadcrumb').height();

                    // Exists When "supercrumb" is added
                    if ($(".breadcrumb .crumbs.supercrumb").length && ($(".breadcrumb ul.crumbs").css("display") != "none")) {
                        // Check if disruptor exists
                        if ($(".disruptorPanel").length && ($(".disruptorPanel").css("display") != "none")) {
                            disruptorPanel = $('.disruptorPanel').height();
                            dest = $(hash).offset().top - (disruptorPanel + headerHeight + breadcrumbHeight);
                        } else {
                            // W fixed breadcrumb
                            dest = $(hash).offset().top - (headerHeight + breadcrumbHeight + 106 + affixHeight);
                        }
                    } else {
                        // W/O Fixed breadcrumb
                        dest = $(hash).offset().top - (navContainer + breadcrumbHeight + 50 + affixHeight);
                    }
                } else {
                    dest = $(hash).offset().top - (headerHeight + affixHeight - 10);
                }
                // Mobile
            } else if ($(window).width() < 1024) {
                // Mobile Nav Container Height
                // Check Business Site/ Old forHome / Research Site for disruptor
                if ($(".disruptorPanel").length && $(".bottom-bar").length) {
                    navContainer = $('.bottom-bar').height();
                    disruptorPanel = $('.disruptorPanel').height();
                    dest = $(hash).offset().top - (headerHeight + navContainer + affixHeight - disruptorPanel);
                } else if ($(".bottom-bar").length) {
                    dest = $(hash).offset().top - (headerHeight + navContainer + affixHeight);
                }
                // New consumer
                if ($(".nav-container").length) {
                    dest = $(hash).offset().top - (headerHeight);
                }
            }
        } else {
            if ($(".breadcrumb-fixed").length && ($(".breadcrumb ul.crumbs").css("display") != "none")) {
                breadcrumbHeight = $('.breadcrumb-fixed').height();
                dest = $(hash).offset().top - (navContainer + breadcrumbHeight + affixHeight);

                // Remove breadcrumb height, since breadcrumb does not show on tablet wide and down
                if ($(window).width() < 1024) {
                    dest = $(hash).offset().top - (navContainer + affixHeight);
                }
            } else {
                dest = $(hash).offset().top - (navContainer + affixHeight);
            }
        }

        setTimeout(function () {
            window.location.hash = hash;
        }, 300);

        // Scroll to destination - Using jQuery's animate() method to add smooth page scroll
        // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
        $('html, body').animate({scrollTop: dest}, 800);
    } // End if
});
});

Any help is gladly appreciated.

Thank you!

Answer 1

In order to make it works, please make the next things:

1. Add position sticky (and other styles) to this element:

2A. Remove the code that toggle between .affix and .affix-top

OR:

2B 1. If you can't do step 2A, you can add this height instead (in order to make affix and affix-top to be with the same height):

2B 2. Remove position: fixed from affix and position static from affix-top (they don't need positions cause we set position to their parent)

In addition, I don't know if it's third party code or not but please try to not use !important property. It's hard to set style for those elements.