Autor Zpráva
marad
Profil
Chtěl bych udělat menu na podobném principu jako zde http://www.ceskatelevize.cz/porady/10318730018-polosero/. Když se stránka načte menu je v určité pozici v divu a když roluji dolů tak menu jede taky "opřené" o horní lištu prohlížeče. Poradí mi někdo od čeho se odpíchnout a jak na to jít?

Díky předem za ochotu
Str4wberry
Profil
Lze to udělat v zásadě následovně: Při události onscroll se podívat na scrollTop stránky a porovnat tuto hodnotu s offsetTop menu. Pokud je odrolování větší, nastaví se position: fixed a naopak.

Tady jsem vyhrabal jednu ukázku. (Kromě výše uvedeného ještě řeší nefixování v případě, že je menu vyšší než prostor okna.) Není to žádný zázrak, ale třeba to pomůže.
marad
Profil
Díky za radu, ale mám docela strach, že je to na mě asi příliš složité. Zvládám základy CSS javascriptu a učím se rychle. Umím trošku programovat v matlabu takže chápu princip těchto podmínek. Ale udělat to funkční? Fíha bez pomoci to nebude jednoduché
Str4wberry
Profil
Uvedená ukázka nefunguje? (Možné to je.) Nebo v čem konkrétně je problém?
marad
Profil
Nevím proč několikrát jsem to otevřel a nefungovala a teď najednou funguje. Ano je to přesně tohle to co se snažím vytvořit. Zeptám se, i když možná hloupě, dal by se čistě teoreticky použít zdrojový kód té ukázky? Ten skript co je tak vytvořen by měl fungovat po předení do mého kódu mám pravdu?


Respektive zkusil jsem to tam nějak v preparovat a nefunguje to.

<html> 
 
<head> 

<title>2.SSU Vyškov</title> 
<link rel="shortcut icon" href="favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<link rel="stylesheet" type="text/css" href="stylopis.css">
</head> 

<style>
body {margin: 0;}
div {padding: 1%;}

.sidebar {position: relative;text-align: left; margin: auto;}

</style>



<body style="text-align: center"> 
 
<div style="position: relative; width: 902px; height:1000; text-align: left; margin: auto; background-image: url(barva.jpg); border: 1px solid DimGray">

<div style="position: absolute; left: 0px; top: 0px"><img src="banner.jpg"></div> 

<div class=sidebar><h2>Sidebar</h2>Snascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div>


<script>
var content = document.getElementsByTagName('div')[1];
var sidebar = document.getElementsByTagName('div')[2];

window.onscroll = function () {
    sidebar.className = (document.documentElement.scrollTop + document.body.scrollTop  > content.offsetTop && document.documentElement.clientHeight > sidebar.offsetHeight) ? "sidebar fixed" : "sidebar";
}
</script>

</div>

</body>

</html>
Davex
Profil
marad:
Chybí tam styl
.fixed {position: fixed; right: 0; top: 0}

Bude ale asi uskakovat do strany.
marad
Profil
I tak to stále nefunguje
Chamurappi
Profil
Reaguji na marada:
Potřebuješ i dolní zarážku, nebo stačí horní? Máš zaručeno, že bude obsah pravého sloupce vždy menší než obsah levého?
marad
Profil
Horní mi stačí.... Teď ale řeším problém že se to nechce ani hnout s rolováním
Davex
Profil
marad:
Ukázka [#5] s doplněným stylem pro .fixed funguje. Tvůj problém by mohl být v tom, že na tvé jiné stránce není sidebar třetí div a bude potřeba asi nějaká podobná úprava jako:

<div id="sidebar" class="sidebar">...</div>
<script>
var sidebar = document.getElementById('sidebar');
// ...
marad
Profil
Takto? Bohužel to stále nic nedělá
<html> 
 
<head> 

<title>2.SSU Vyškov</title> 
<link rel="shortcut icon" href="favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<link rel="stylesheet" type="text/css" href="stylopis.css">
</head> 

<style>
body {margin: 0;}
div {padding: 1%;}
.fixed {position: fixed; right: 0; top: 0}
.sidebar {position: relative;text-align: left; margin: auto;}

</style>



<body style="text-align: center"> 
 
<div style="position: relative; width: 902px; height:1000; text-align: left; margin: auto; background-image: url(barva.jpg); border: 1px solid DimGray">

<div style="position: absolute; left: 0px; top: 0px"><img src="banner.jpg"></div> 

<div id="sidebar" class="sidebar"><h2>Sidebar</h2>Snascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div>


<script>
var content = document.getElementsByTagName('div')[1];
var sidebar = document.getElementById('sidebar');

window.onscroll = function () {
    sidebar.className = (document.documentElement.scrollTop + document.body.scrollTop  > content.offsetTop && document.documentElement.clientHeight > sidebar.offsetHeight) ? "sidebar fixed" : "sidebar";
}
</script>

</div>

</body>

</html>
Str4wberry
Profil
To je docela vtipný problém*. Nefunguje to z toho důvodu, že je v CSS třída fixed deklarována před třídou sidebar. A protože Kaskádování » Pozdější vyhrává, tak se zafixování neprojeví.

*) Na první pohled by se mohlo zdát, že nastavení třídy fixed jako druhé v pořadí onu třídu sidebar přebije, ale není tomu tak. Použití více tříd způsobí, že se jejich vlastnosti naháží do jednoho pytle v pořadí dle CSS deklarací, tedy:
.sidebar, .fixed {position: fixed; right: 0; top: 0; position: relative;text-align: left; margin: auto;}
A zafixování tak bude nechtěně přepsáno.
marad
Profil
Díky moc! Už mi to funguje, zatím je to jen řádek textu a nehýbe se to přesně po linii kde bych chtěl, takže to musím ještě trošku upravit ty pozice, ale hlavní je, že už to funguje. Fórum nezklamalo, přeci jen se tu najdou ochotní lidé. Děkuji všem za pomoc

Tak už to vážně funguje :)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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