Sticky Position dengan jQuery

Kadang dalam mendesain website, kita perlu membuat satu atau lebih bagian yang akan tampak terus pada pandangan pengunjung. Contoh mudahnya adalah jika kita ingin membuat menu atas selalu tampil meskipun pengunjung melakukan scrolling hingga halaman paling bawah. Berikut ini salah satu sintaks jQuery yang telah saya gunakan untuk membuat sticky position.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
   $(document).ready(function(){ 
     if (!!$('.class_sticky').offset()) { // pastikan ada elemen dengan kelas ".class_sticky"
       var stickyTop = $('.class_sticky').offset().top; 
       $(window).scroll(function(){ // jika window di-event
         var windowTop = $(window).scrollTop(); 
         if (stickyTop < windowTop){
           $('.class_sticky').css({ position: 'fixed', top: 0 });
         }
         else {
           $('.class_sticky').css('position','static');
         }
       });
     }
   });
 </script>
Iklan
Pos ini dipublikasikan di Developer. Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

w

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.