Docs

[alriteam]

Hello,

I have developed custom sticky header for one of page. Only problem is transition is not smooth.

URL : https://jamminofficial.staging.wpengine.com/jammin-masterclass

Please look at below CSS Code

div#x-section-1{
    margin: 0px;
    padding: 0px;
    visibility: visible !important;
    position: fixed !important;
    z-index: 1;
    display: inline;
    width: 100%;
		transition: all 1s ease;
}

div#x-section-1.sticky{
    height:100px;
  transition: all 1s ease;
}

#mc-logo {
  width:110px;
  transition: all 1s ease;
}

#mc-logo.sticky {
  width:55px;
}

JS Code

jQuery(function($) {

$(window).scroll(function(){

if($(this).scrollTop()<=0) {
	$('#x-section-1').removeClass('sticky');
	$('#mc-logo').removeClass('sticky');

}else{
	$('#x-section-1').addClass('sticky');
	$('#mc-logo').addClass('sticky');
}

});

});

Thanks.

[Rupok]

Hi there,

You will need jQuery UI library to set transition on such case as it’s not usually possible to set transition here on toggling classes.

Thanks!

[Author]

Posts