WayPoints.js – Üste yapışan div

WayPoints.js 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>

 

 

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-02-13 tarihinde yayınlandı,Toplam 1210 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...