Görgetést követő fejléc (Tracker Header)

A Görgetést követő fejléc (Tracker Header) görgetés közben az oldal tetejére rögzíti a fejlécet. Lefelé görgetve a fejléc eltűnik, de egy kis felfelé húzásra újra megjelenik. Így mindig jobban kihasználhatod a rendelkezésre álló helyet, főleg mobil eszközökön.

A görgetést követő fejléc korábbi funkció, ezért a Dynamic Content for Elementor → Funkciók oldalon kell bekapcsolni, mielőtt megjelenik a szerkesztőben. Az egész webhelyre érvényes, egyes oldalakra külön nem állítható.

Hol találod?

A beállítás az egész webhelyre vonatkozik, ezért nem az oldal beállításai között van. Az Elementor szerkesztőjében nyisd meg a bal felső hamburger menüt, itt válaszd a Dynamic.ooo panelt, és nyisd ki a Görgetést követő fejléc szakaszt. A szakasz minden Elementorral szerkesztett oldal szerkesztőjéből ugyanígy elérhető.

https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor

Kapcsold be a Görgetést követő fejléc kapcsolót, utána megadhatod a fejléc szelektorát.

A fejléc szelektora

A Fejléc szelektora mezőben a fejlécet tartalmazó elem CSS-szelektorát kell megadnod (.osztály vagy #azonosító), vagyis azt az elemet, amelyet a bővítmény átmozgat görgetés közben. Hogy a témádban mi ez az elem, az a téma HTML-szerkezetétől függ, lásd a témák HTML-szerkezete fejezetet.

• A szelektornak ponttal vagy kettőskereszttel kell kezdődnie.
• Több elemet is megadhatsz vesszővel elválasztva, például ha a fejléc mellett egy felső sáv (top bar) is követi a görgetést. Ilyenkor a bővítmény mindegyikre alkalmazza a hatást.
• Ha a szelektorhoz nincs találat az oldalon, a mező mellett piros NO MATCHES felirat látszik, és a további beállítások nem jelennek meg.

https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor

Ha a szelektor talál elemet az oldalon, a felirat zöld DETECTED lesz, és megjelennek a további beállítások.

https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor

A képen a Beállítások szakasz az Átfedés kapcsolóval, a CSS-osztályokat felsoroló tájékoztatás és a Tracker Header alkalmazása itt mező látszik.

További beállítások

Beállítás	Mit csinál	Alapérték
Átfedés	Bekapcsolva a fejléc rögzítetten lebeg az oldal fölött. Ilyenkor megadhatsz Z-Index értéket is, vagyis a fejléc rétegsorrendjét.	Nem
Tracker Header alkalmazása itt	Mely eszközökön legyen aktív a hatás: desktop, tablet, mobile. Csak az előnézetben vagy az éles oldalon érvényesül, a szerkesztőben nem.	mindhárom

Kinézet módosítása CSS-sel

Görgetés közben a bővítmény osztályokat ad a fejléc elemére, így a megjelenést CSS-sel tudod alakítani:

Osztály	Mikor kerül rá
.trackerheader--top	az oldal tetején vagy
.trackerheader--not-top	nem az oldal tetején vagy
.trackerheader--bottom	az oldal alján vagy
.trackerheader--not-bottom	nem az oldal alján vagy
.trackerheader--pinned	a fejléc látható (megjelenítési módban van)
.trackerheader--unpinned	a fejléc el van rejtve

A fejléc animációját ez a CSS adja:

.dce-trackerheader .trackerheader {
    will-change: transform;
    transition: transform 200ms ease-in-out;
}
.dce-trackerheader .trackerheader--pinned {
    transform: translateY(0%);
}
.dce-trackerheader .trackerheader--unpinned {
    transform: translateY(-100%);
}

Ezt a kódot a saját stíluslapodon módosíthatod, például az átmenet hosszát (200ms) vagy a mozgás irányát.