Autor | Zpráva | ||
---|---|---|---|
marad Profil |
#1 · Zasláno: 16. 12. 2012, 21:34:21
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 |
#2 · Zasláno: 17. 12. 2012, 16:39:11
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 |
#3 · Zasláno: 17. 12. 2012, 22:42:30
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 |
#4 · Zasláno: 18. 12. 2012, 16:34:10
Uvedená ukázka nefunguje? (Možné to je.) Nebo v čem konkrétně je problém?
|
||
marad Profil |
#5 · Zasláno: 19. 12. 2012, 16:56:44 · Upravil/a: marad
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 |
#6 · Zasláno: 19. 12. 2012, 18:43:32
marad:
Chybí tam styl .fixed {position: fixed; right: 0; top: 0} Bude ale asi uskakovat do strany. |
||
marad Profil |
#7 · Zasláno: 19. 12. 2012, 19:00:08
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 |
#9 · Zasláno: 19. 12. 2012, 21:53:22
Horní mi stačí.... Teď ale řeším problém že se to nechce ani hnout s rolováním
|
||
Davex Profil |
#10 · Zasláno: 19. 12. 2012, 22:01:54
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 |
#11 · Zasláno: 20. 12. 2012, 09:29:02
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 |
#12 · Zasláno: 20. 12. 2012, 12:43:01
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;} |
||
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 :) |
||
Časová prodleva: 11 let
|
0