Ilyet, hogy lehet csinálni?
9gag dot com
van az a Join Now feliarat de ha kicsit lejjebb görgetünk felugrik.. Ilyen hogy lehet gondolom ez valami új css3 beállítás. De melyik?:D
válasza:Szép:D De engem ez nem izgat.
Arra vagyok kiváncsi, hogyan csinálták
válasza:A megoldás: megnézed az oldal forrását és kiböngészed, hogy csinálták. Nem hiszem, hogy bárki megtenné ezt helyetted. :)
B megoldás: keresel ilyen mechanizmust biztosító szkripteket, vagy css3 attribútumokat (bár szerintem ez inkább szkript).
válasza:Itt egy egyszerű demo hogy én hogyan csinálnám. Jquery-t használok. A lényeg a script a végén.
Egyszerűen a window scroll eseményénél figyeled hogy éppen hova scrolloztál, és ha eléggé lent vagy akkor megjeleníted a fenti rejtett szöveget, ha pedig eléggé fent, akkor elrejted. Semmi sem ugrik ott sehova, a link ott van, csak el van rejtve display:none-al, csak ezt a látszatot kelti.
A demonál tegyél valami hosszú szöveget a tartalom részbe hogy scrollozni kelljen.
<html>
<head>
<script src=" [link] type="text/javascript"></script>
</head>
<body>
<div style="position:fixed; width: 100%; top:0; z-index:10; height:20px; background-color:#000000; color:#CCCCCC"><div style="float:left">header sor</div><div id="joinHeader" style="display:none;float:left;margin-left:10px;">Join now in header</div></div>
<div style="margin-top:20px; position:relative;">
<p>
Join now
</p>
<p>
Ide tegyél egy jó hosszú szöveget, hogy scrollozni kelljen
</p>
</div>
<script type="text/javascript">
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var display = $("#joinHeader").css("display");
if(scroll > 40 && display == "none"){
$("#joinHeader").fadeIn();
}
if(scroll < 40 && display != "none")
$("#joinHeader").fadeOut();
});
</script>
</body>
</html>
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!