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>
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 )

Gambar Twitter

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

Foto Facebook

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

Foto Google+

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

Connecting to %s