Плавное применение fixed в стилях - Вопросы по CSS

jQuery(document).ready(function(){
 jQuery(window).scroll(function(){
  if (jQuery(this).scrollTop() > 10) {
   jQuery('.header').addClass('header_background');
  }else{
   jQuery('.header').removeClass('header_background');
  }
 });
});

.header {
box-shadow: rgba(0, 0, 0, 1) 5px 0px 10px;
    width: 100%;
    position: relative;
    z-index: 100;
	background: #fff;
	transition: 1s;
}
.header.header_background {
    position: fixed;
    z-index: 9999;
    top: 0;
	transition: 1s;
}