Autor | Zpráva | ||
---|---|---|---|
radekt Profil |
Ahoj,
setkal jsem se s požadavkem zákazníka, aby byl scroll top button za každých okolností přesně uprostřed výšky viewportu. Na vertikální zarovnání se dá použít třeba to, že pro obal použije display: table a pro prvek v něm - v tomto případě scroll top - button display: table-cell a vertical-align: middle . Jenomže to ovlivní i ostatní prvky, což nechci. Podobně řešení Yuhů. Použil jsem jednotku vh a zarovnané to je:
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #blok1 { float: left; width: 50%; background: grey; } #blok2 { background: brown; } #scroll_top { position: fixed; z-index: 1; text-decoration: none; font-size: 3vh; height: 5vh; /* 50 - (height/2) */ top: 47.5vh; text-align: center; -moz-box-sizing: border-box; box-sizing: border-box; padding: .2em .4em; font-weight: 400; color: #fff; background: #4682B4; background: rgba(70, 130, 180, 0.7); /*display: none;*/ right: 1.5rem; } </style> </head> <body> <div id="blok1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div id="blok2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div id="scroll_top">^</div> </body> </html> Problém je však, že na malých displejích je scroll top button proporcionálně prťavý. Samozřejmě i to se dá řešit pomocí media queries a pro různé šířky obrazovky dávat scroll top buttonu jiné rozměry. Chci se zeptat - není nějaké elegantnější řešení? Díky Radek |
||
Časová prodleva: 3 dny
|
|||
Str4wberry Profil |
#2 · Zasláno: 23. 5. 2016, 22:33:40
Nevím, jestli dobře rozumím, ale proč to neudělat takto? Živá ukázka
|
||
radekt Profil |
Str4wberry:
Děkuji, otestuji. Co přesně tam dělá ten záporný margin-top ?
|
||
Keeehi Profil |
#4 · Zasláno: 24. 5. 2016, 15:25:28
radekt:
Centrování. top: 50% posune vršek elementu do poloviny. Takže je potřeba ho vrátit o polovinu jeho výšky. To já 30px, tak proto záporný poloviční margin.
|
||
radekt Profil |
Jasně, že mě to hned netrklo, díky. Přesto - testoval jsem na nejnovějším Firefoxu a Chrome (rozlišení 1680x1050) - to zarovnáno doprostřed není. Záhada.
|
||
Tomáš123 Profil |
#6 · Zasláno: 25. 5. 2016, 11:08:25
radekt:
Dodal by si, prosím, živú ukážku a odkaz na snímku obrazovky? |
||
radekt Profil |
#7 · Zasláno: 25. 5. 2016, 13:19:21
Tomáš123:
Takže resumé: když jsem to aplikoval do jednoho projektu, tak to zarovnané není, s něčím se to hádá a jelikož je tam kontejnerů a stylů víc, budu si muset vyčlenit nějaký čas na delší pátrání, někde mám z tohoto hlediska chybu. Testovací vzorek funguje. Každopádně děkuji za nakopnutí správným směrem. |
||
Tomáš123 Profil |
#8 · Zasláno: 25. 5. 2016, 21:04:02
radekt:
Nepoužívaš náhodou namiesto position: fixed position: absolute ? Fixná pozícia sa počíta vždy od zobrazovacej plochy prehliadača; absolútna od najbližšieho nadradeného prvku s nestatickou pozíciou* alebo (v prípade, že žiadny taký prvok neexistuje), takisto od zobrazovacej plochy prehliadača*.
* Označené časti textu sú na JPW trochu nepresne popísané – definícia obmedzujúceho bloku; prvý odsek pod definíciou absolútnej pozície: – aj fixne poziciovaný prvok tvorí obmedzovací blok – v prípade, že žiadny prvok nie je nestaticky poziciovaný, obmedzujúcim blokom nie je prvok <body> ale zobrazovacia plocha prehliadača (otestované v IE11, Firefox 46.0.1, Edge 25.10586.0.0).
|
||
radekt Profil |
#9 · Zasláno: 26. 5. 2016, 07:48:24
Tomáš123:
Používám position: fixed , kde je tedy zakopaný pes, nevím. A jak jsem psal, ty stránky jsou trošku komplikovanější, navíc s kompletně převzatým html a css (dělám jim redesign a scroll top button jsem tam přidal), což situaci komplikuje ještě více. No, čeká mě detektivní práce ;o).
|
||
Časová prodleva: 4 dny
|
|||
radekt Profil |
Ahoj, Str4wberry na srazu říkal, ať dám živou ukázku, takže tady je. Jedná se o zkušební web a zde ten scroll top button vertikálně zarovnaný není. Podotýkám, že není přímo v html, ale přidává se tam pomocí jQuery a ve stylování scroll top buttonu jsem přidal nějaké další věci pro svou potřebu.
|
||
radekt Profil |
#11 · Zasláno: 30. 5. 2016, 14:46:38
Už jsem na to přišel, měl jsem pro scroll top button definice v různých Media Queries, které se mezi sebou tloukly. V týdnu ještě provedu důkladnější testy napříč desktopovými a mobilními prohlížeči, ale myslím, že už to bude v poho.
|
||
Časová prodleva: 8 let
|
0