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="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>