--- site_name: WPlama site_description: "Správa, opravy a vývoj WordPress webů a e-shopů" site_url: https://www.wplama.cz contact_email: info@wplama.cz title: Jak v Divi udělat jakýkoliv element přichycený k obrazovce url: https://www.wplama.cz/divi-element-prichyceny-k-obrazovce/ date: 2016-09-01 modified: 2022-12-05 author: Tomáš Cirkl type: post categories: [Divi šablona a Elegant Themes] tags: [Divi, Elegant Themes, javascript] --- Divi šablona a Elegant Themes # Jak v Divi udělat jakýkoliv element přichycený k obrazovce [![profil 100x100](https://www.wplama.cz/wp-content/uploads/2026/11/profil-100x100.jpg "profil 100x100") **Tomáš Cirkl**](https://www.wplama.cz/author/tomas/) Publikováno 1. 9. 2016 Aktualizováno **5. 12. 2022** 2 min čtení Pozor: Článek je z roku 2016. Některé postupy se mohly změnit. ![pc stůl](https://www.wplama.cz/wp-content/uploads/2016/08/pc-stul.jpg "pc stůl") V tomto návodu pro šablonu [Divi](https://www.wplama.cz/divi) si ukážeme, jak udělat jakýkoliv element přichycený k horní hraně obrazovky při rolovaní obsahem dolu. Využijeme k tomu **JS plugin Sticky**, který si můžete zdarma stáhnout z oficiálních stránek. JS plugin stáhnete tak, že kliknete na oranžové tlačítko **DOWNLOAD PLUGIN**. [![Sticky Plugin](https://www.wplama.cz/wp-content/uploads/2016/08/sticky-plugin-1024x500.png "Sticky Plugin")](https://www.wplama.cz/wp-content/uploads/2016/08 / sticky-plugin.png) Sticky Plugin Stažený zip rozbalte a soubor **jquery.sticky.js** nahrajte pomocí FTP do složky *js* v šabloně. - Pokud používáte přímo šablonu Divi, jedná se o cestu *wp-content/themes/Divi/js/*. - Pokud využíváte [child šablonu](https://www.wplama.cz/vytvorit-child-sablonu/) Divi (doporučuji) jedná se o *wp-content/themes/-jmeno-slozky-sablony-/js/*. Jestliže šablona neobsahuje složku *js*, tak ji vytvořte. [![Soubor JS](https://www.wplama.cz/wp-content/uploads/2016/08/soubor-js.jpg "Soubor JS")](https://www.wplama.cz/wp-content/uploads/2016/08 / soubor-js.jpg) Soubor JS na hostingu Dále se přihlašte do WordPress administrace a v levém menu vyberte *Divi -> Nastavení šablony*. Na stránce nastavení pak zvolte záložku **Integrace** a do pole **Přidat kód do < head > vašeho webu** vložte následující kód. ``` j Query(document).ready(function(){ j Query("#sticker").sticky({top Spacing:200}); j Query("#sticker2").sticky({top Spacing:150}); j Query("#sticker3").sticky({top Spacing:100}); }); ``` **V kódu nezapomeňte nahradit jméno domény a jméno adresáře šablony.** Nastavení uložte. [![Integrace v Divi nastavení](https://www.wplama.cz/wp-content/uploads/2016/08/integrace-v-divi-nastaveni-1024x500.png "Integrace v Divi nastavení")](https://www.wplama.cz/wp-content/uploads/2016/08 / integrace-v-divi-nastaveni.png) Integrace v Divi nastavení V kódu můžete také změnit hodnotu u *top Spacing*. Ta představuje odsazení objektu od horního ohraje okna prohlížeče. V kódu jsou tři a jsou vždy přiřazeny ke třídě: - pro **sticker** je hodnota 200 - pro **sticker2** je hodnota 150 - pro **sticker3** je hodnota 100 Posledním krokem je přiřazení ID (třídy) k elementu. To uděláte tak, že si vyberete v Divi builderu modul, který chcete, aby se posouval a v jeho nastavení kliknete na záložku **Vlastní CSS** a do pole **CSS identifikace** vložíte sticker, sticker2 nebo sticker3. Podle toho, jak chcete, aby byl modul odsazený od horní hrany prohlížeče. [![CSS identifikace](https://www.wplama.cz/wp-content/uploads/2016/08/css-identifikace-1024x576.jpg "CSS identifikace")](https://www.wplama.cz/wp-content/uploads/2016/08 / css-identifikace.jpg) CSS identifikace Nakonec nezapomeňte uložit modul a stránku a máte hotovo. Já jsem ukázku udělal s modulem pro přihlášení. [![Ukázka přichycení](https://www.wplama.cz/wp-content/uploads/2016/08/ukazka-prichyceni-1024x500.png "Ukázka přichycení")](https://www.wplama.cz/wp-content/uploads/2016/08 / ukazka-prichyceni.png) Ukázka přichycení Zdroj: [How to Make Any Divi Page Element Sticky–Divi Nation Short](https://www.elegantthemes.com/blog/divi-resources/how-to-make-any-divi-page-element-sticky-divi-nation-short) - [#Divi](https://www.wplama.cz/stitek/divi/) - [#Elegant Themes](https://www.wplama.cz/stitek/elegant-themes/) - [#javascript](https://www.wplama.cz/stitek/javascript/) Sdílet - - [](mailto:?subject=Jak v Divi udělat jakýkoliv element přichycený k obrazovce&body=Jak v Divi udělat jakýkoliv element přichycený k obrazovce https://www.wplama.cz/divi-element-prichyceny-k-obrazovce/) - [](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.wplama.cz%2Fdivi-element-prichyceny-k-obrazovce%2F) - [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.wplama.cz%2Fdivi-element-prichyceny-k-obrazovce%2F) ![profil 150x150](https://www.wplama.cz/wp-content/uploads/2026/11/profil-150x150.jpg "profil 150x150") Autor Tomáš Cirkl Zakladatel WPlama. Od roku 2014 se starám o weby a e‑shopy na WordPressu a píšu o tom, co při té práci řeším. Třikrát jsem přednášel na Word Campech. 1 035 článků [Všechny články autora →](https://www.wplama.cz/author/tomas/) ## Komentáře Zatím tu nikdo nekomentoval. Napište první komentář. ### Přidat komentář [Zrušit odpověď](https://www.wplama.cz/divi-element-prichyceny-k-obrazovce/#respond) [← Předchozí článek WordPress komentáře: automatické filtry pomocí IP, emailu nebo obsahu](https://www.wplama.cz/komentare-automaticke-filtry/) [Další článek → Jak ve WordPress udělat náhledový obrázek povinný](https://www.wplama.cz/povinny-nahledovy-obrazek/) Související ## Mohlo by vás zajímat [Všechny články z rubriky Divi šablona a Elegant Themes →](https://www.wplama.cz/wordpress/divi-elegant-themes/) ![kombinovatelne nastaveni](https://www.wplama.cz/wp-content/uploads/2026/04/kombinovatelne-nastaveni.png "kombinovatelne nastaveni") Divi šablona a Elegant Themes ### [Divi 5: Kombinovatelné nastavení](https://www.wplama.cz/divi-5-kombinovatelne-nastaveni/) 13. 4. 2026 2 min čtení --- ![command center](https://www.wplama.cz/wp-content/uploads/2026/03/command-center.png "command center") Divi šablona a Elegant Themes ### [Divi 5: Command Center](https://www.wplama.cz/divi-5-command-center/) 7. 4. 2026 4 min čtení --- ![spekulativni prerendering](https://www.wplama.cz/wp-content/uploads/2026/03/spekulativni-prerendering.png "spekulativni prerendering") Divi šablona a Elegant Themes ### [Divi 5: Spekulativní prerendering](https://www.wplama.cz/divi-5-spekulativni-prerendering/) 30. 3. 2026 3 min čtení ---