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.
Hodil by se i kód stránky případně její relevantní části.
Link (prosím nesdílet)
Žádné trhání jsem nezaznamenal.
Bohužel, nemůžu to momentálně nahrát, ale mně se to trhá a k žádné animaci nedochází (na zcela dvou rozdílných zařízení)
Mi se ten obrázek v hlavičce zmenšuje/zvětšuje při použití kolečka myši na
stránce nebo směrových šipek bez nějakého trhání (Firefox 88 a 105).
Trhání se ukazuje při použití myši na posuvník (a to jen při velmi opatrném tažení myší).
Trvá to jen chvilku, toho si snad uživatel ani nevšimne.
A funguje to jako animace, nebo okamžitá změna?
Právě že to teď dělá extrémně (alespoň mně), takže si toho nelze nevšimnout.
Pořád ale nechápu, proč nedochází k zachování poměru stran?
Je to okamžitá změna.
ff pro xp, resize:
vypadá to divně. proč ta zmenšenina nemá zachovaný poměr stran? být to firemní logo, tak majitel určitě protestuje.
Jak má být teda správně kód, aby byl poměr stran zachován, prosím?
Řekl bych, kdyby docházelo k zachování poměru stran, tak by ten obrázek skoro "zmizel" a byl málo čitelný.
Ale přesně to se mně děje
mě ten obrázek neskáče, jinak bych se zmínil. jen bylo* to logo hnusné kvůli degenerované výšce.
nekóduju weby, ale snad existuje i parametr "width".
zmenšené logo nemusí být detailně čitelné - před chvílí jsem ho přece viděl, zmenšené má zachovaný tvar a barvy, čili do rozumného zmenšení vím o co jde.
ale protože se logo mění okamžitě při rolování dolů, je pak otázka, jestli je šťastně umístěné, nebo jestli má tento nápad smysl.
*) jinak aktuální verze mi připadá lepší. logo sice deformované, ale není rozmazané. taky původní filosofující záhlaví nahrazeno reálnějším popisem.
Pochopitelně, jen mně napadlo, když obrázek není čtvercový, jde snadno změnit jeden rozměr se zachováním poměru stran, takže by se druhý rozměr změnil automaticky? Samozřejmě, pokud to chci definovat v pixelech. V procentech je to snadné.
Když je to v procentech snadné, proč je nepoužiješ? K tomu jsou právě procenta, když není předem známý rozměr obrázku.
Pokud trváš na pixelech, musel bys předem zjistit rozměry obrázku X,Y a výpočtem nastavit nové správné hodnoty, aby zůstal zachovaný poměr stran.
Už jsem na to přišel. Stačí před nastavením výšky dát
To však stále nemění nic na tom, že nechápu, proč to tak blbne. Asi bude lepší, když to úplně zruší, protože mně už to vážně nebaví.