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>

 

 

 

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla