Příklad objektu, který zůstává na stránce stále na stejném místě.
Funguje minimálně v IE 6 a v Mozille. V Opeře to nefunguje, objekt ujíždí.
Základem je použití stylu position: absolute (pro Explorer), nebo position: fixed (pro Mozillu). Mozilla umí udělat fixní objekt sama od sebe, pro Explorer se to musí skriptovat.
Skript si všímá události rolování stránky. V tu chvíli přepočítá pozici fixovaného objektu a překreslí ho.
Pro detailní pochopení příkladu si prosím zobrazte zdroj:
<style>
#idecko {position: fixed;} /* pro Mozillu */
#idecko {position: "absolute";} /* pro IE */
#idecko {top: 90px; left: 80%} /* libovolné další vlastnosti (kromě
position) */
p {width: 70%}/* nedůležité, jenom aby se text nedostal k fixovanému objektu
*/
</style>
<script>
function fixedEl(id){
if(document.all){
document.all[id].style.pixelTop = document.body.scrollTop + 90;
// pixelTop je něco jako top v CSS
// document.body.scrollTop říká, jak moc je to odrolované dolů
// ta devadesátka je ta samá devadesátka jako ve stylu
}
}
</script>
<body onscroll="fixedEl('idecko')">
<!-- fixovaný objekt -->
<div id="idecko">
Objekt zafixovaný na stránce
</div>
Zkuste si rolovat
text
text
konec stránky