WayPoints.js – Üste yapışan div

imakewebthings sitesinin jQuery için geliştirdiği WayPoints eklentisi ile hazırlanmış olan Sticky Elements facebook zaman tüneli benzeri sayfayı aşağı kaydırmaya benzer. Başlangıç olarak normal yerinde duran sekmeler kaydırma çubuğu aşağı kaydırıldığı zaman sekmeler tavana yapışıp sabit olarak
duruyor.

Download

Demo

Kullanım

Head etiketleri arasına eklenecek olan bölümler.

Js ve stil dosyaları :

<link rel="stylesheet" href="style.css" type="text/css" media="all">
<script src="../modernizr.custom.js"></script>
<script src="https://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"></script>
<script src="../../waypoints.js"></script>

Javascript :

<script type="text/javascript">
$(document).ready(function() {
	$('.top').addClass('hidden');
	$.waypoints.settings.scrollThrottle = 30;
	$('#wrapper').waypoint(function(event, direction) {
		$('.top').toggleClass('hidden', direction === "up");
	}, {
		offset: '-100%'
	}).find('#main-nav-holder').waypoint(function(event, direction) {
		$(this).parent().toggleClass('sticky', direction === "down");
		event.stopPropagation();
	});
});
</script>

Body etiketleri arasına eklenecek olan bölüm.

Html :

	<div id="main-nav-holder">
		<nav id="main-nav">
			<ul>
				<li>Section 1</li>
				<li>Section 2</li>
				<li>Section 3</li>
				<li>Section 4</li>
				<li>Section 5</li>
			</ul>
		</nav>
	</div>