jQuery fixed sidebar flickering on scroll

Question

I am trying to make the header and sidebar sticky upon scrolling. The header is sticking fine. The sidebar sticks as well, but continuously flickers. I read somewhere this is due to a Chrome bug, but the issue is universal.

When I try to debug via developer tools, I can see the class "sticky" being continuously added and removed to the sidebar, unlike the header.

Any insights will be highly appreciated.

JS:

    function ScrollFunc() {
        /* navbar */
        if (window.pageYOffset >= (jQuery('#nav-wrapper').height()) {
            jQuery('#nav-wrapper').addClass("sticky");
        } else {
            jQuery('#nav-wrapper').removeClass("sticky");
        }

        /* sidebar */
        if (window.pageYOffset >= (jQuery("#sidebar").offset().top + jQuery("#sidebar').height())) {        
            jQuery('#sidebar').addClass('sticky');
        } else {
            jQuery('#sidebar').removeClass("sticky");
        }
    }

CSS:

    .sticky {
        position: fixed;
        top: 0;
    }

antikbd antikbd · Accepted Answer · 2018-12-04T16:41:40

Fixed:

jQuery(window).load(function() {
    crazyOffset = jQuery('#sidebar').offset().top + jQuery('#sidebar').height();
});

function ScrollFunc() {
    /* navbar */
    if (window.pageYOffset >= (jQuery('#nav-wrapper').height()) {
        jQuery('#nav-wrapper').addClass("sticky");
    } else {
        jQuery('#nav-wrapper').removeClass("sticky");
    }

    /* sidebar */
    if (window.pageYOffset >= crazyOffset) {        
        jQuery('#sidebar').addClass('sticky');
    } else {
        jQuery('#sidebar').removeClass("sticky");
    }
}

jQuery fixed sidebar flickering on scroll

1 Answers