| 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: 1 rok
|
|||