MASAKO Öğrenci Bursa 15 yıl önce

WayPoints.js - Üste yapışan div

REKLAM

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>