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

> A fejléc rögzítése görgetés közben, elrejtése lefelé görgetve és visszahozása felfelé húzásra, a beállítások és a CSS-osztályok.

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

![A Görgetést követő fejléc szakasz kikapcsolt állapotban](./kepek/oldalgorgetes-fejlec-kovetes-ki.webp)

*A Görgetést követő fejléc szakasz kikapcsolt állapotban* (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](https://hub.hellowp.io/hu/plugins/dynamic-content-for-elementor/oldalgorgetes-burkolo-es-temaszerkezet/) 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.

![A mező mellett a NO MATCHES felirat jelzi, hogy nincs találat](./kepek/oldalgorgetes-fejlec-kovetes-nincs-talalat.webp)

*A mező mellett a NO MATCHES felirat jelzi, hogy nincs találat* (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.

![A DETECTED jelzés és a további beállítások](./kepek/oldalgorgetes-fejlec-kovetes.webp)

*A DETECTED jelzés és 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:

```css
.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.