Javascript - zmenšení obrázku v hlavičce při posunutí dolů nepracuje správně.

Dobrý den,

Potřeboval jsem ve WordPressu připnout hlavičku. To jsem udělal pomocí CSS

header#masthead {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
}

Avšak, byl tu ještě problém, že obrázek v hlavičce je příliš velký, proto jsem chtěl při posunutí dolů automaticky zmenšit a při posunutí nahoru zase vrátit do původní velikosti. To jsem udělal pomocí JS

jQuery(function(){
    var navIsBig = true;
    var $nav = jQuery('#masthead .custom-logo');
	var height_original = jQuery('#masthead .custom-logo').css("height").replace("px","");
	var height_small = height_original * 0.666;
	var width_original = jQuery('#masthead .custom-logo').css("width").replace("px","");	
	var width_small = width_original * 0.666;

jQuery(document).scroll( function() {
   var value = jQuery(this).scrollTop();

  if ( value > 100 && navIsBig ){
      $nav.stop().animate({
           height:height_small,width:width_small
      },100);
      navIsBig = false;
  } else if (value <= 100 && !navIsBig ) {
      $nav.stop().animate({
          height:height_original,width:width_original
      },100);
      navIsBig = true;
  }
});
});

Avšak, zatímco připnutí hlavičky funguje správně, změna velikosti obrázku funguje dost podivně. Při pouze malém posunutí dolů (jednou zmáčknout šipku dolů nebo posunout kolečko), se obrázek vůbec nezmění nebo se začne "třást", jako by se snažil zmenšit, ale něco mu v tom za každou cenu bránilo. Každopádně, musím se posunout více níž, aby se obrázek zmenšil (při zpětném posunutí nahoru vzniká stejný problém).

Zkoušel jsem to v různých prohlížečích (i zařízeních) a chová se to stejně, takže je asi problém v kódu, ale netuším kde.

Prosím o radu,

Děkuji

PS. Zkoušel jsem zrušit připnutití hlavičky. A i když to jde dost blbě vidět, očividně to na to nemá vliv.