Autor | Zpráva | ||
---|---|---|---|
zoomprojekt Profil |
#1 · Zasláno: 27. 8. 2016, 00:05:17
Prosím o radu jak zprovoznit tento script. Snažím se to naroubovat do svých stránek, ale i když použiju jenom čistě kód uvedený na stránkách a zkopíruju ho, stejně mi to nefungue, přitom na oněch stránkách mi ta funkce v uvedeném příkladu funguje, takže problém nebude v prohlížeči, nýbrž v tom, že někdě dělám nějakou blbou chybu, za kterou se budu určitě hrozně stydět.
Na zkoušku jsem vytvořil html soubor: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title></title> <link rel="stylesheet" type="text/css" href="testmnu.css"> </head> <body> <script> // Create a clone of the menu, right next to original. $('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide(); scrollIntervalID = setInterval(stickIt, 10); function stickIt() { var orgElementPos = $('.original').offset(); orgElementTop = orgElementPos.top; if ($(window).scrollTop() >= (orgElementTop)) { // scrolled past the original position; now only show the cloned, sticky element. // Cloned element should always have same left position and width as original element. orgElement = $('.original'); coordsOrgElement = orgElement.offset(); leftOrgElement = coordsOrgElement.left; widthOrgElement = orgElement.css('width'); $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show(); $('.original').css('visibility','hidden'); } else { // not scrolled past the menu; only show the original menu. $('.cloned').hide(); $('.original').css('visibility','visible'); } } </script> <header> <div class="logo">STICKY MENU ON SCROLL!</div> <div class="intro">Some dumbass tagline goes here</div> <div class="menu">Menu goes here - home - links - blah blah</div> </header> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />(Bottom!) </body> </html> následně v hlavičce odkazovaný css soubor testmnu.css * {font-family:arial; margin:0; padding:0;} .logo {font-size:40px; font-weight:bold;color:#00a; font-style:italic;} .intro {color:#777; font-style:italic; margin:10px 0;} .menu {background:#00a; color:#fff; height:40px; line-height:40px;letter-spacing:1px; width:100%;} .content {margin-top:10px;} .menu-padding {padding-top:40px;} .content {padding:10px;} .content p {margin-bottom:20px;} a ať s tím dělám co chci, stejně se mi ten script nechce spustit. Prosím o radu nebo já vím o JS úplné.. Díky! |
||
Keeehi Profil |
#2 · Zasláno: 27. 8. 2016, 01:02:21
Když si na té odkázané stránce klepneš na to ozubené kolečko vedle JS, tak ti vyskočí okno s částí Add External JavaScript - to jsou externí javascripty, které tam ta stránka dodává, i když nejsou uvedené v kódu. On totiž ten script není čistý javascript ale využívá knihovnu jQuery, kterou tedy i ty musíš dodat do tvého projektu. Tím by bylo potřeba začít. No a protože je to napsané tak prasácky, tak ten javascript nemůže být umístěn v kódu nad menu, protože se spoléhá na to, že menu už je vytvořené. Takže by to šlo takto.
Nejlepší by ale bylo na to celé zapomenout a udělat to hezčeji a bez zbytečného používání zbytečně velké knihovny. A abych byl hodně hodný, dám ti odkaz na krásný kvalitní článek (resp. web, projdi si těch článků co nejvíce) který je dokonce i v češtině! |
||
zoomprojekt Profil |
#3 · Zasláno: 27. 8. 2016, 10:27:49
Díky moc :)
|
||
zoomprojekt Profil |
Keeehi:
Měl bych na tebe ještě jeden dotaz, když použiju kód ze stránek, které jsi uvedl nějak takto, tak mám problém s tím, že menu se přilepí okamžitě a ne až potom, co k němu úplně scrolluji. Mohl bys mi prosím ještě poradit? Děkuji. |
||
Časová prodleva: 6 let
|
0