Přidat otázku mezi oblíbenéZasílat nové odpovědi e-mailem 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.

Předmět Autor Datum
zkuste přes console.log() si průběžně vypisovat do konzole co kód dělá, a ze zobrazených dat pak můž…
ksdfksdkf 16.10.2022 10:36
ksdfksdkf
No, nevím. Důvod, proč se obrázek nezmenší okamžitě, je jednoduchý. Právě kvůli kontrole pozice var…
MichalDM 17.10.2022 21:54
MichalDM
Už vážně nevím, zkoušel jsem to napsat na stackoverflow, tam mně poradil tento kód, který ještě násl…
MichalDM 21.10.2022 10:02
MichalDM
Hodil by se i kód stránky případně její relevantní části.
Wikan 21.10.2022 10:52
Wikan
Link (prosím nesdílet)
MichalDM 21.10.2022 12:13
MichalDM
Žádné trhání jsem nezaznamenal.
Wikan 21.10.2022 12:47
Wikan
Bohužel, nemůžu to momentálně nahrát, ale mně se to trhá a k žádné animaci nedochází (na zcela dvou…
MichalDM 21.10.2022 15:55
MichalDM
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 ši…
IQ37 21.10.2022 12:56
IQ37
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 ši…
MichalDM 21.10.2022 15:58
MichalDM
A funguje to jako animace, nebo okamžitá změna? Je to okamžitá změna.
IQ37 21.10.2022 21:05
IQ37
ff pro xp, resize: 500px × 204px (změněno na 500px × 50px) vypadá to divně. proč ta zmenšenina nem…
lední brtník 21.10.2022 14:42
lední brtník
Jak má být teda správně kód, aby byl poměr stran zachován, prosím?
MichalDM 21.10.2022 15:59
MichalDM
Řekl bych, kdyby docházelo k zachování poměru stran, tak by ten obrázek skoro "zmizel" a byl málo či…
IQ37 21.10.2022 21:07
IQ37
Ale přesně to se mně děje []
MichalDM 21.10.2022 23:04
MichalDM
mě ten obrázek neskáče, jinak bych se zmínil. jen bylo* to logo hnusné kvůli degenerované výšce. he…
lední brtník 21.10.2022 23:31
lední brtník
nekóduju weby, ale snad existuje i parametr "width". Pochopitelně, jen mně napadlo, když obrázek ne…
MichalDM 25.10.2022 10:42
MichalDM
Když je to v procentech snadné, proč je nepoužiješ? K tomu jsou právě procenta, když není předem zná…
host 25.10.2022 10:49
host
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í ni… poslední
MichalDM 25.10.2022 10:51
MichalDM

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 */
}

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?

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.

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.

Zpět do poradny Odpovědět na původní otázku Nahoru