Fixní postranní panel

Některé prvky na stránce může být vhodné umístit s fixní posicí. Zajistí se tím to, že budou stále viditelné.

Smysl to může mít pro:

  1. důležité navigační prvky,
  2. odkazy pro sdílení stránky na sociálních sítí,
  3. reklamy / reklamní bannery

Umístit něco fixovaně není žádný kumšt:

element {position: fixed}

… a je to. Co ale v případě, že má element mít nejprve nějakou normální posici? Přijde na řadu JavaScript, který v momentě, kdy daný prvek začne mizet, přepne posici na fixovanou.

Řešení

  1. Při rolování stránky (window.onscroll)
  2. se porovná o kolik je odrolováno (scrollTop) s posicí elementu (offsetTop)
  3. a podle toho se (ne)nastaví třída, která element zafixuje (díky tomu lze i fixovanému elementu velmi snadno měnit vzhled).

CSS

.sidebar {position: absolute; right: 0; top: 100px}
.sidebar div {background: #0D6AB7; text-align: center; width: 120px; height: 600px; }
.sidebar .fixed {position: fixed; right: 0; top: 0}

HTML

<div class='sidebar'>
	<div id="sidebar">
		(Obsah)
	</div>
</div>

JavaScript

Druhá část podmínky (za &&) porovnává výšku fixovaného boxu s výškou okna. Asi nemá smysl v takovém případě fixovat.

var sidebar = document.getElementById('sidebar');
window.onscroll = function () {
  sidebar.className = (
    document.documentElement.scrollTop + document.body.scrollTop > sidebar.parentNode.offsetTop
    && document.documentElement.clientHeight > sidebar.offsetHeight
  ) ? "fixed" : "";
}

Možná úskalí

CSS vlastnost fixed vztahuje umístění elementu k oknu prohlížeče, nikoliv k nejbližšímu elementu s absolutní/relativní posicí.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Fixní menu při scrollování

Fixní menu při rolování

Jak při odrolování stránky zafixovat menu na horní hraně obrazovky.

Odkaz na kotvu a fixní menu

Odkaz na kotvu a fixní hlavička

Při použití fixního menu/hlavičky se stane nepěkná věc, že při odkazu na kotvu je cíl skryt pod menu. Co s tím?

Aktivování/deaktivování okna

Zachycení aktivování a deaktivování okna v JS

V JavaScriptu lze relativně snadno reagovat na aktivování nebo deaktivování okna/záložky/tabu.

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Test existence obrázku JavaScriptem

Ověření existence obrázku pomocí JS

Jak JavaScriptem ověřit existenci obrázku?

Komentáře