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

zkuste přes console.log() si průběžně vypisovat do konzole co kód dělá, a ze zobrazených dat pak může pochopit kde vzniká chyba...

No, nevím. Důvod, proč se obrázek nezmenší okamžitě, je jednoduchý. Právě kvůli kontrole pozice

var value = jQuery(this).scrollTop();

Nahoře je pochopitelně 0. A když se posunu kolečkem, je to 100 (šipkou ještě méně), takže je logické, že při krátkém posunu k zmenšení obrázku nedojde.

Stále je tu ale problém, proč dochází k tomu "shaku".

Během toho se ustavičně mění jak šířka, tak výška a navíc nastavení overflow: hidden;, ale tenhle atribut tam vždy vyskočí při změně velikosti, akorát za normálních okolností je to pouze 100ms, takže si ho člověk v tak krátkém okamžiku nevšimne.

Vážně netuším, co mu přesně vadí.

Už vážně nevím, zkoušel jsem to napsat na stackoverflow, tam mně poradil tento kód, který ještě následně upravil, jenže stále nefunguje. Nebo spíš funguje ještě hůře a v žádném prohlížeči nepracuje. Nevíte, prosím Vás, kde může být chyba?

// Add a class to the header when scrolling
let header = document.querySelector('header'); 
window.addEventListener('scroll' , function () {
    let window_top = this.scrollY;
    if (window_top == 0) {
        header.classList.remove('resize');
    }else {
        header.classList.add('resize'); 
    }
});

/* these are the default styles (when the user doesnt scroll down yet) */
header#masthead {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    transition: .3s;
}
header#masthead img{
    transition: .3s; /*here i added transition to give the image a smooth animation*/
}
/* these are the styles when the user scrolls */
header#masthead.resize img{
    height: 50px; /* <=== here i gived the image a smaller size */
}

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.

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í

A funguje to jako animace, nebo okamžitá změna?

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.

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?

A funguje to jako animace, nebo okamžitá změna?

Je to okamžitá změna.

ff pro xp, resize:

500px × 204px (změněno na 500px × 50px)

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.

height: 50px; /* <=== here i gived the image a smaller size */

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.

nekóduju weby, ale snad existuje i parametr "width".

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

object-fit: contain;

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í.