Autor Zpráva
Paja222
Profil
Ahoj,
byla by nějaká možnost udělat prvek, který bude při načtení stránky klasicky na svém místě (např. v prostředku stránky), ale jakmile se stránka roluje dolů, tak aby zůstal "připnutý" na vrchu a vše ostatní se rolovalo normálně? Můžete to ukázat například pro obrázek, nebo jakýkoliv blok. Ve výsledku to bude záhlaví tabulky, ale to už není problém si upravit.

Abychom si rozuměli, tak něco podobného má stránka idos.cz, kde po vyhledání libovolného spoje se ukáže stránka a napravo mají tímto stylem udělanou reklamu.

Javascript částečně ovládám, ale nenapadlo mě, jak by to bylo možné udělat a ajax jde zatím bohužel mimo mě.

Všem moc díky za jakoukoliv radu :-)
Honza.P
Profil
V css si nastav třeba

position: fixed;
top: 270px;
Keeehi
Profil
Paja222:
javascriptem budeš odchytávat událost onscroll. V obsluze si zjistíš, kolik už je odscrollováno a pokud to přesáne nějakou mez, tak tomu prvku nastavíš top podle toho, kolik už je odscrollováno.
Paja222
Profil
Honza.P: To je právě to, co nechci, potřebuju, aby to vyjelo, ne aby to tam bylo nastálo

Keeehi: Mohl bys mi prosím ukázat, jak by to přibližně mohlo vypadat? Díky
Paja222
Profil
Tak už mám vyřešeno, díky moc Keeehi za nakopnutí. Pro ty, kdo by chtěli vidět řešení, zde je
<div id=thlavni style='width: 100px; height: 100px; background-color: blue;'></div>
<script type="text/javascript">

var offTop2 = window.document.getElementById('thlavni').offsetTop; //puvodni vyska
var offLeft = window.document.getElementById('thlavni').offsetLeft;
//nastaveni absolutni pozice statickeho prvku
document.getElementById('thlavni').style.position="absolute";
document.getElementById('thlavni').style.top=offTop2+"px";
document.getElementById('thlavni').style.left=offLeft+"px";

window.onscroll = scroll;

function scroll(){

  var offTop = window.document.getElementById('thlavni').offsetTop;
  var vyska = document.body.scrollTop;
  
  if(offTop2<vyska){
    document.getElementById('thlavni').style.top=vyska+"px";
    }
  else{
    document.getElementById('thlavni').style.top=offTop2+"px";
    }
  }
</script> 

Je to moje řešení, jelikož jsem se při tom i javascript částečně učil, tak to nebude nic extra, ale funguje ve všech prohlížečích :-) Každopádně když mě opravíte, nebo poradíte, jak co zlepšit, budu rád :-)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: