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%);
}