Mérei Tamás webdesigner

Sticky header

Szerző:   |   2014-08-15
A "feltapadós fejléc" jQuery-vel pár sorral kivitelezhető, de most egy standalone JS plugint szeretnék megmutatni.

A működő kódot ide kattintva tudod megnézni.

A Headhesive.js egy kisméretű script, a minified verzió nincs 3kbyte. Az alábbi példában a példányosítás során a <header> elemet fogjuk "feltapasztani", de természetesen bármilyen egyedi class nevet is megadhatunk.


var headhesive = new Headhesive('header');

Ilyenkor a plugin által alapból beállított headhesive--stick, headhesive--clone és headhesive--unstick class-okat fogja váltogatni scrollozás közben a script, a feltapadási pont pedig 300 pixelnél lesz. Ha ezeket szeretnék megváltoztatni, akkor egészítsük ki az inicializálást az alábbiak szerint.


var options = {
	offset: 500,
	classes: {
		clone:   'clone',
		stick:   'stick',
		unstick: 'unstick'
	}
};
var headhesive = new Headhesive('header', options);

A fenti változatban a klónozott fejléc a clone, a "feltapadt" állapot a stick nevezetű classt fogja felvenni, amikor pedig visszaállunk az eredeti állapotra, akkor unstick-re cseréli. Ezen kívül a default 300-as feltapadási pontot átírtuk 500-ra. Itt egyébként nemcsak szám adható meg, hanem egy konkrét class vagy ID név is.

HTML forráskód


<header>
	<nav class="clear">
		<a href="" class="logo">Logo</a>
		<ul>
			<li><a href="">első</a></li>
			<li><a href="">második</a></li>
			<li><a href="">harmadik</a></li>
			<li><a href="">negyedik</a></li>
		</ul>
	</nav>
</header>

<section>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum lobortis sapien, ac cursus orci imperdiet sed. Fusce bibendum egestas adipiscing. Integer dictum, nisi at pharetra elementum, sapien nunc euismod nunc, sit amet volutpat nisi ligula quis tellus. Maecenas sed diam rhoncus, venenatis ante non, tincidunt justo. Vivamus id neque venenatis, elementum diam et, euismod sem. Phasellus varius tellus eget diam eleifend facilisis. Curabitur vitae ante mi. Mauris commodo facilisis convallis.</p>
	<p>Sed semper luctus neque, eget semper ante dignissim quis. Aliquam erat volutpat. Ut cursus egestas fermentum. Aenean sit amet venenatis nisl. Suspendisse in tellus a purus mattis semper. Fusce vel metus nec erat elementum consectetur. Ut malesuada felis elementum sem posuere, vitae vehicula ligula feugiat. Nulla sit amet consequat velit.</p>
	<p>Quisque non posuere nulla. Suspendisse scelerisque semper blandit. Duis lacinia neque vitae porttitor euismod. Nam dapibus velit eu lorem dictum elementum. Proin blandit rutrum orci sit amet commodo. Etiam tempor suscipit fringilla. Duis sagittis urna vel urna auctor mollis. Fusce vel imperdiet lorem. Donec erat felis, molestie ac gravida et, fringilla id nulla. Nulla volutpat imperdiet eros ut iaculis. Donec quis purus elementum leo feugiat fermentum vel in sapien. Ut nec malesuada diam, fringilla rutrum magna. Morbi aliquam id lectus a varius.</p>
	<p>Mauris sit amet quam ut elit ornare varius eget vitae metus. Proin feugiat quis ante a mollis. In hac habitasse platea dictumst. Nam consectetur vulputate urna, aliquet aliquam justo bibendum in. Nam scelerisque massa arcu, sit amet pretium purus posuere eu. Pellentesque eleifend ac mauris sit amet imperdiet. Etiam purus lectus, feugiat eget pulvinar sed, laoreet quis mi. Sed fermentum non ante eget elementum. Pellentesque vitae pharetra ante. Sed dictum urna at sem mollis bibendum. Integer dignissim ipsum tellus, eget dictum elit ornare hendrerit. Maecenas non odio iaculis, ultrices tellus eu, placerat magna. Proin vel est neque.</p>
	<p>Phasellus gravida elementum sem, eu pellentesque diam eleifend sit amet. Etiam bibendum faucibus elit, a porta elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ligula augue, lacinia sed orci eu, feugiat blandit sapien. Fusce in justo ac urna fringilla aliquet ut at nulla. Aliquam non vestibulum massa. Suspendisse tincidunt ipsum et iaculis imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget fringilla mauris. Nunc sodales porttitor metus, et imperdiet orci tincidunt a.</p>
	<p>Donec eget felis dignissim, gravida justo at, dictum eros. In sit amet feugiat tortor. Vivamus in consectetur velit. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc auctor augue neque. Sed euismod sollicitudin dignissim. Curabitur varius lorem justo, vel porttitor tortor viverra et. Etiam id orci enim. Aenean turpis lorem, sodales tempus cursus sit amet, sollicitudin nec lectus. Integer id magna justo. Cras facilisis, erat sed convallis feugiat, orci purus suscipit neque, eget ullamcorper nisi arcu eu dui. Cras nisi risus, faucibus eget dignissim id, tristique in metus. Nulla vel ornare elit.</p>
	<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque quis pharetra mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam id condimentum sapien, vel consequat nibh. Proin quis elementum dolor, eget gravida dolor. Praesent mattis faucibus nisl, pretium vehicula mi mollis ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec nec sapien ligula. Proin pulvinar accumsan erat et blandit.</p>
	<p>In in interdum elit. Pellentesque feugiat lectus lobortis euismod posuere. Integer gravida tincidunt urna, id eleifend purus consectetur id. Phasellus et turpis in magna vulputate placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis venenatis, augue nec vestibulum vulputate, dui est bibendum dui, a mattis mauris enim in leo. Nunc fermentum malesuada rutrum. In aliquam malesuada nunc, eget tincidunt sapien.</p>
	<p>Donec eget felis dignissim, gravida justo at, dictum eros. In sit amet feugiat tortor. Vivamus in consectetur velit. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc auctor augue neque. Sed euismod sollicitudin dignissim. Curabitur varius lorem justo, vel porttitor tortor viverra et. Etiam id orci enim. Aenean turpis lorem, sodales tempus cursus sit amet, sollicitudin nec lectus. Integer id magna justo. Cras facilisis, erat sed convallis feugiat, orci purus suscipit neque, eget ullamcorper nisi arcu eu dui. Cras nisi risus, faucibus eget dignissim id, tristique in metus. Nulla vel ornare elit.</p>
	<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque quis pharetra mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam id condimentum sapien, vel consequat nibh. Proin quis elementum dolor, eget gravida dolor. Praesent mattis faucibus nisl, pretium vehicula mi mollis ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec nec sapien ligula. Proin pulvinar accumsan erat et blandit.</p>
	<p>In in interdum elit. Pellentesque feugiat lectus lobortis euismod posuere. Integer gravida tincidunt urna, id eleifend purus consectetur id. Phasellus et turpis in magna vulputate placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis venenatis, augue nec vestibulum vulputate, dui est bibendum dui, a mattis mauris enim in leo. Nunc fermentum malesuada rutrum. In aliquam malesuada nunc, eget tincidunt sapien.</p>
	<p>Donec eget felis dignissim, gravida justo at, dictum eros. In sit amet feugiat tortor. Vivamus in consectetur velit. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc auctor augue neque. Sed euismod sollicitudin dignissim. Curabitur varius lorem justo, vel porttitor tortor viverra et. Etiam id orci enim. Aenean turpis lorem, sodales tempus cursus sit amet, sollicitudin nec lectus. Integer id magna justo. Cras facilisis, erat sed convallis feugiat, orci purus suscipit neque, eget ullamcorper nisi arcu eu dui. Cras nisi risus, faucibus eget dignissim id, tristique in metus. Nulla vel ornare elit.</p>
	<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque quis pharetra mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam id condimentum sapien, vel consequat nibh. Proin quis elementum dolor, eget gravida dolor. Praesent mattis faucibus nisl, pretium vehicula mi mollis ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec nec sapien ligula. Proin pulvinar accumsan erat et blandit.</p>
	<p>In in interdum elit. Pellentesque feugiat lectus lobortis euismod posuere. Integer gravida tincidunt urna, id eleifend purus consectetur id. Phasellus et turpis in magna vulputate placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis venenatis, augue nec vestibulum vulputate, dui est bibendum dui, a mattis mauris enim in leo. Nunc fermentum malesuada rutrum. In aliquam malesuada nunc, eget tincidunt sapien.</p>
</section>

CSS forráskód


@import url(http://fonts.googleapis.com/css?family=Titillium+Web);
* {padding:0;margin:0}
.clear:before, .clear:after { content:" "; display: table }
.clear:after { clear: both }
body { font-family: 'Titillium Web', sans-serif; }
a { text-decoration: none }

section{
	width: 800px;
	margin:0 auto
}

header {
	background: #ddd;
	width: 100%;
	background: #26272b;
	margin: 0 0 20px 0
}
header .logo {
	color: #fff;
	font-size: 35px;
}
header nav {
	width: 800px;
	margin: 0 auto
}
header nav ul {
	list-style: none;
	float:right
}
header nav li {
	float: left
}
header ul a {
	display: inline-block;
	padding: 20px;
	color: rgba(255,255,255,0.7)
}
header ul a:hover {
	color: #000;
	background: #FFBB22
}

p {
	margin: 0 0 20px 0;
	text-align:justify;
	line-height: 1.7;
	color: rgba(0,0,0,0.4)
}


header.clone {
	position: fixed;
	top: 0;
	left: 0;
	transform: translateY(-100%);
	transition: all 100ms ease-in-out;
}
/* feltapadt fejlécnél kisebb a padding, ezáltal a fejléc magassága is */
header.clone ul a {
	padding: 10px
}
header.clone .logo {
	font-size: 25px;
}
header.stick {
	transform: translateY(0%);
}

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

28 hozzászólás

  1. nagypapi
    2015. október 27. kedd - 20:32

    Hello!
    Egy olyan problémám volna, hogy a Safari böngésző alatt (csak próbaképpen telepítettem fel többek között ezt a böngészőt is, hogy lássam működik-e a különböző böngészőkön a honlap) a clone-ozott header folyamatosan látszik, és nem tűnik el.
    Esetleg erre van valamiféle megoldás? köszi előre üdv!

    • cyrex
      2016. január 19. kedd - 14:27

      Nem teszteltem Safari alatt, de mondjuk ez a cucc annyira nem is jó. Inkább jQuery-t szoktam már én is használni helyette 🙂

  2. Robert Herold
    2015. október 10. szombat - 15:35

    Ja nem… bocsi… azzal jó!
    Csak én ezt használom: https://github.com/viljamis/responsive-nav.js
    és ezzel összeakad! 🙁

  3. Robert Herold
    2015. október 10. szombat - 10:51

    Szia,

    Nekem a header-em alapból position: absolute, mert fut a háttérben egy slider. Ráraktam ezt a sticky fejlécet, ami működik is, de eltűnt az alap header-em! 🙁
    Van erre valami megoldás?

    Köszi előre is!

  4. Péter
    2015. szeptember 16. szerda - 17:09

    Szia!

    Elég barom vagyok…szóval a segítségedet szeretném kérni. Remélem jó helyre írom :D. Nos szóval van egy html.file, benne egy . Azt szeretném elérni, hogy a header-ben kép legyen de sehogysem jön össze :(. css-ben eldeformálódik a kép nem tudom miért legyen az full hd, width:100% nem jelenik meg a kép visszont ha van height is megadva akkor megjelenik csak nagyon csúnyán :(. a top header mérete width:100%; height:500px; es nem tudok egy full hd-s kepet megjeleníteni egyszerűen nem jön össze.

    Előre is köszönöm!
    Petya.

    • cyrex
      2015. szeptember 23. szerda - 23:07

      Rakjad be háttérnek és akkor a background-size-al lehet szórakozni.

  5. Levente
    2015. augusztus 10. hétfő - 20:54

    Szia Tamás!

    Nekem a szöveg mindig a menü felett jelenik meg, ha görgetem, tudsz ebbe segíteni, hogy a manü alatt fusson a szöveg?

    Előre is köszönöm.

    • cyrex
      2015. augusztus 11. kedd - 18:08

      Használj z-index-et.

    • Levente
      2015. augusztus 11. kedd - 19:37

      Köszi szépen működik, még annyiba tudsz segíteni, hogy hogy kell azt megcsinálni, hogy egy css-ben beállított háttérkép mindenki monitorján teljes méretben jelenjen meg.

    • cyrex
      2015. augusztus 17. hétfő - 09:00

      background-size:cover

    • Levente
      2015. augusztus 19. szerda - 10:31

      köszönöm

  6. CitromFej
    2015. február 10. kedd - 18:21

    Szia Cyrex!

    Ez egy elég hülye kérdés lesz! Notepad++-ban mikor css-t írok és szeretném ezt a jellet lerakni: { (Ctrl+Alt+B) Nem csinál semmit és csak úgy tudom ha vágolapra helyezem és Ctrl+v-zem. Segítenél, hogy tudnám használni-e nélkül! 😀

    • cyrex
      2015. február 10. kedd - 19:15

      AltrGr+B kombót használjad.

  7. Papp Balázs
    2014. november 24. hétfő - 19:02

    Szia!

    Tudom, hogy nem ide tartozik, de nekem lenne két kérésem amit meg kéne csinálni egy videóval
    Az első az, hogy csinálhatnál egy tutoriált arról, hogy hogyan lehet egy weboldalra kereső dobozt rakni, úgy hogy lehessen vele keresni is, amit úgy értek, hogy ha valamit bele írok akkor azt keresse meg a weboldalon, de ha nincs rajta olyan dolog akkor csak egy hiba üzenetet írjon ki, úgy mint ezen a weboldalon.
    A második pedig az lenne, hogy csinálnál arról egy tutiroált, hogy hogyan lehet a weboldalnak tárhelyet bérelni és domain nevet adni a weboldalnak, úgy hogy az legyen, hogy:
    -valami. “hu”, “com”, “net” vagy “org”.
    Előre is köszönöm!

    • cyrex
      2014. november 24. hétfő - 23:16

      Nézd meg a wordpress sablonkészítés posztot, abban látsz a keresőre mintát. Tárhelyért és domainért fizetsz a szolgáltatónak, ők meg elküldik az adatokat amivel be tudsz lépni.

  8. nrbrt1
    2014. október 18. szombat - 16:28

    Szia!
    Csináltam egy oldalt, a bejegyzéseket HR-rel választom el, és ugye az utolsó bejegyzés alatt nem kell elválasztó.
    Minden HR-re tettem egy after-post class-t. Utána a CSS kódba beleírtam, hogy .after-post:last-child { display: none; }
    de nem csinál semmit.
    38-as krómot használok.

    Előre is köszi!

    Norbi

    • cyrex
      2014. október 18. szombat - 17:01

      Az úgy nem lesz jó, inkább a last-of-type selector-t használd.

    • nrbrt1
      2014. október 20. hétfő - 16:51

      Köszi! Így már jó lett 🙂

  9. Tomi
    2014. szeptember 19. péntek - 09:06

    Hali. Az lenne a kérdésem hogy van olyan lehetőség arra hogy az alap menüt egy másikra cseréljük ha lefele görgetjük az oldalt? Itt azt értem hogy egyes dolgok ne legyenek láthatóak a klónozott menün.

    • cyrex
      2014. szeptember 21. vasárnap - 13:03

      Kap egy külön class-t amikor megjelenik, innentől CSS-ben teljesen átalakíthatod és el is tudsz tüntetni belőle dolgokat.

  10. Tamás
    2014. szeptember 13. szombat - 23:16

    Szia
    Megpróbáltam én is megcsinálni ezt amit te de nekem valami nem sikerült. Légyszi nézd meg ezt a linket hátha te tudod hogy mi a probléma. Köszönöm előre is.

    http://194.33.184.44/~slywebe/demo1/

    • cyrex
      2014. szeptember 14. vasárnap - 13:25

      Valami nagyon nem jó. A header-en belül legyen az egész fejléced és azt ne pozicionáld sehova, static legyen. Ne a holder-re tegyed a JS-t, hanem a header-re.

  11. Újvári Bálint
    2014. szeptember 2. kedd - 17:44

    Hali!
    Miért van az, hogy az űrlapon a gomb (mindegy, hogy button vagy submit típusú input) pár pixelnyit elcsúszik a többi inputhoz képest?
    Minden input ezeket a tulajdonságokat kapta: width: 300px; padding: 5px; border: 2px solid #E84C3D;

    Mivel lehet ezt orvosolni, vagy miért van ez?

    • cyrex
      2014. szeptember 14. vasárnap - 13:28

      Használj valamilyen CSS reset cuccot. Itt van egy csomó: cssreset.com
      Ezek arra szolgálnak, hogy totál ugyanarról az alapról fog indulni a dizájn mindenféle böngészőben. Tehát elvileg könnyebb vele pixelpontos dizájnt készíteni ami egyformán fog kinézni mindegyik böngészőben.

  12. Végh Ákos
    2014. augusztus 16. szombat - 13:35

    Szia!
    Te hogy csinálod ezt a csökkentett méretes felvételt?
    Mit méretezel át, vagy hogy állítod be?

    • cyrex
      2014. augusztus 16. szombat - 21:51

      Nem értem a kérdést. A videók rögzítésére gondolsz?

    • Végh Ákos
      2014. augusztus 17. vasárnap - 20:24

      Igen. Hogy csinálod, hogy ne lógjanak ki a programok a felvételből? Milyen felbontású a monitorod?

    • cyrex
      2014. augusztus 18. hétfő - 10:16

      1920×1080 a monitor felbontása, de csak 1280×720-as méretet rögzítek belőle.

Hozzászólás

Legújabb hozzászólások