# Görgetési sorozat: rögzített szakaszok a képkockák fölött

> Szöveg vagy widget rögzítése a sorozat fölé két képkockaszám között: azonosító, Indítás és Vége, pozíció és animációk.

Egy képsorozat önmagában dísz. Történetté a megfelelő pillanatban megjelenő szöveg teszi: egy sor, amely mozdulatlanul áll a képkockák fölött, majd átadja a helyét a következőnek. A **Görgetési sorozat** widget **Rögzített szakaszok** funkciója ezt csinálja: megadod egy widget CSS IDját és azokat a képkockaszámokat, amelyek között látszania kell. A widget alapjait az [áttekintő fejezet](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-sorozat-attekintes/) írja le.

Szükséged van számozott képkockákra, és a sorozatot tartalmazó szakasznak vagy tárolónak legyen **Min magassága**, különben nincs mit végiggörgetni.

## Adj azonosítót a tartalmi widgetnek

1. Add a rögzíteni kívánt widgetet (például **Címsor** vagy **Szövegszerkesztő**) ugyanabba a szakaszba vagy tárolóba, ahol a **Görgetési sorozat** widget van.
2. Jelöld ki, nyisd meg a **Haladó** fület, és írj egy nevet a **CSS ID** mezőbe. Használj betűket és számjegyeket, szóköz nélkül, például `capA`.
3. Ugyanezen a fülön állítsd a **Z-Index** értékét a sorozaténál magasabbra. A sorozat saját **Z-Index** értéke a **Stílus** fülön 0-ról indul, így az 1-től felfelé bármi a tartalmat előre hozza.

## Állítsd be a rögzített szakaszt

1. Jelöld ki a **Görgetési sorozat** widgetet, és nyisd meg a **Tartalom** fül **Egyéb opció** szakaszát.
2. Kapcsold be a **Rögzített szakaszok** kapcsolót. Bekapcsolva **Megjelenítés** a felirata.
3. Kattints az **Elem hozzáadása** gombra, és töltsd ki a sort.

![Az Egyéb opció szakasz bekapcsolt Rögzített szakaszokkal és egy kinyitott sorral](./kepek/kepek-media-sorozat-ragados-sor.webp)

*Az Egyéb opció szakasz bekapcsolt Rögzített szakaszokkal és egy kinyitott sorral* (https://minta-bolt.hu/wp-admin/post.php?post=134&action=elementor)

A képen a **Szakasz ID**, az **Indítás**, a **Vége**, a **Fent (%)**, az **Animáció indítása** és az **Animáció befejezése** mező látszik az első sorban.

| Mező | Mit írj bele |
|---|---|
| **Szakasz ID** | A tartalmi widgetnek adott CSS ID, `#` nélkül |
| **Indítás** | Az a képkockaszám, amelynél a tartalom megjelenik. A képkockaszámok 1-től a sorozat képeinek számáig futnak |
| **Vége** | Az a képkockaszám, amelynél a tartalom eltűnik |
| **Fent (%)** | Milyen messze van a képernyő tetejétől rögzítve, a nézetablak százalékában. A 10 a teteje közelébe teszi, a 65 nagyjából kétharmadra lefelé. Alapérték: 5 |
| **Animáció indítása** / **Animáció befejezése** | Elhagyható belépő és kilépő effekt. Az alapérték mindkettőnél **Nincs**, ilyenkor a tartalom egyszerűen megjelenik és eltűnik |

Az **Animáció indítása** választékai: **Nincs**, **Előtűnés**, **Előtűnés alulról**, **Előtűnés felülről**, **Előtűnés balról**, **Előtűnés jobbról** és **Beforgatás**. Az **Animáció befejezése** lista ugyanezek a kilépő változatok, a legördülőben látható felirataikkal.

Minden további tartalomhoz kattints újra az **Elem hozzáadása** gombra. Mindegyiknek saját CSS ID és saját sor kell. A sor fejlécében a **Szakasz ID** látszik, így a sorok könnyen megkülönböztethetők.

## Hogyan viselkedik

A teszt egy 12 képkockás sorozat volt két felirattal. Az elsőnél az **Indítás** 2, a **Vége** 5, a **Fent (%)** 8; a másodiknál az **Indítás** 8, a **Vége** 11, a **Fent (%)** 65.

![Az első felirat a sorozat 4. képkockáján a képernyő teteje közelében](./kepek/kepek-media-sorozat-ragados-a.webp)

*Az első felirat a sorozat 4. képkockáján a képernyő teteje közelében* (https://minta-bolt.hu/km3-sorozat-ragados/)

A képen a 4. képkockánál az első felirat a képernyő tetején áll.

![A második felirat a sorozat 10. képkockáján, lejjebb a képernyőn](./kepek/kepek-media-sorozat-ragados-b.webp)

*A második felirat a sorozat 10. képkockáján, lejjebb a képernyőn* (https://minta-bolt.hu/km3-sorozat-ragados/)

A képen a második felirat vette át a helyet, és lejjebb áll, mert a **Fent (%)** értéke 65.

- Az **Indítás** és a **Vége** között a tartalom a **Fent (%)** pozícióban marad, miközben mögötte a képkockák váltakoznak.
- A tartományon kívül rejtett, és akkor is újra rejtett, ha a látogató továbbgörgetett a teljes sorozaton.
- Visszagörgetve ugyanazok a képkockák fölé visszatér.
- A tartományok átfedhetnek: két olyan sor, amelynek az **Indítás** és **Vége** tartománya keresztezi egymást, egyszerre rögzül, mindkettő a saját **Fent (%)** pozíciójában.

## Korlátozások

- Az **Indítás** és a **Vége** képkockaszám, ezért csak a saját képkockaszámodhoz képest van értelme. Ha módosítod a képek számát, minden sort újra át kell nézni.
- A szerkesztőben az **Indítás** mező leírása azt mondja, hogy „nézetablakban vagy px-ben megadva”. Ez a leírás téves: a mező mellett lévő súgószöveg és a tényleges viselkedés is képkockaszámot használ.
- A **Rögzített szakaszok** csak a widgettel azonos szakaszon vagy tárolón belüli tartalmat rögzíti.
- A szerkesztőben nincs előnézet a rögzített állapotról, ezért a közzétett oldalon ellenőrizd.

## Hibaelhárítás

**A tartalom sosem jelenik meg.** Ellenőrizd, hogy a **Szakasz ID** pontosan egyezik a widget CSS IDjával, a nagybetűkkel együtt, és hogy nem írtad elé a `#` jelet.

**A tartalom a képkockák mögött jelenik meg.** Emeld a tartalmi widget **Z-index** értékét a **Haladó** fülön. A sorozat alapból 0-n áll.

**A tartalom csak felvillan.** Az **Indítás** és a **Vége** túl közel van egymáshoz, vagy a szakasz túl alacsony. Szélesítsd a képkockatartományt, vagy emeld a szakasz **Min magasság**át, hogy több görgetés jusson egy képkockára.

**Semmi sem mozdul.** A szakasznak vagy tárolónak olyan **Min magasság** kell, amelyet végig lehet görgetni.