WayPoints.js – Üste yapışan div

Post by

waypoints
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.

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="http://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>

 

 

 

Leave a comment