Jak vytvořit fixovaný banner?

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