sticky header blinking

[egadriandroid]

the preview of the header is in this link
the header will start blinking or flickering when you scroll down and there’s a height where the header will flickering between sticky and non sticky header.
I’ve tried what I’ve found in google, I’ve added -webkit-transform: translate3d(0,0,0); and still wont work. Oh, and this flickering only happen in chrome only, I’ve tried in firefox and microsoft edge, but apparently the bug only exist in google chrome.

Can someone help what css code should I add to stop the flickering?

Sorry for my bad english. thanks

[Atelierbram]

I can confirm the flickering. Maybe try a reduced test case in a demo. The jQuery javascript for this in local.js I think.

jQuery(window).scroll(function(){
  var limit = 185;
  if (jQuery(this).scrollTop()>=limit){
    jQuery('.header-container').addClass('sticky');
    jQuery('.maincategory-breadcrumb-container').hide();            
  } else {
    jQuery('.header-container').removeClass('sticky');
    jQuery('.maincategory-breadcrumb-container').show();
  }
});

There is this wrapper div named .page (why page?) which only wraps the header-container and bread-crumbs. It collapses for it contains the fixed positioned header-container and the static positioned bread-crumbs as well, … which is odd. Maybe rethink this …, anyway, when setting a fixed height on page, the flickering stops.

.page {
  /* width: 100%; width of a div defaults to 100% like all block-elements */
  margin: 0 auto;
  padding: 0;
  text-align: left;
  height: 50px;
}

[egadriandroid]

@Atelierbram, thanks a lot, your answer is really to the point, I applied it and problem fixed!
sorry for my very late reply, because I didn’t read the email notification and the client has been halt the job for a while.

thanks a lot! have a nice day

[IbtesamUddin]

Thanks a lot @Atelierbram
you saved my day :)

[Author]

Posts