Mengubah Element Position secara Dinamis dengan jQuery

jQuery fixed-element behavior
Baru-baru ini situs jejaring sosial Facebook menambah sebuah widget kecil di sebelah kanan atas pada halaman Home masing-masing user, yang berisi aktifitas terbaru dari teman-teman kita. Uniknya, ketika saya menggulir halaman ke bawah, alih-alih menghilang dari layar monitor, widget tersebut malah menempel pada menu bar biru yang menjadi ciri khas Facebook.

Meskipun beberapa orang menganggap fitur tersebut tidak penting, tapi efek yang dihasilkannya sangat keren. Sebenarnya saya pernah menggunakan efek seperti itu pada beberapa proyek dengan bantuan jQuery. Di bawah ini adalah kode yang saya gunakan untuk menghasilkan efek tersebut.

$(document).ready(function() {
 
  var menu = $("#menu");
  var menuOriTop = menu.offset().top;
  var view = $(window);
 
  view.bind("scroll resize", function(){
 
    var menuViewTop = view.scrollTop();
    if ((menuViewTop > menuOriTop) && !menu.is(".menu-fixed")){
 
      menu.removeClass("menu-absolute").addClass("menu-fixed");
    }
 
    else if ((menuViewTop <= menuOriTop) && menu.is(".menu-fixed")){
 
      menu.removeClass("menu-fixed").addClass("menu-absolute");
    }
  });
});
&#91;/code&#93;
Penjelasannya, kode <strong>jQuery</strong> di atas akan memeriksa apakah elemen menu telah digulir melewati batas atas mula-mula, jika sudah melewati, maka atribut <em>position</em> dari elemen menu akan diubah menjadi <em>fix</em>. Sebaliknya, jika elemen menu kurang dari batas atas mula-mula, maka atribut <em>position</em> akan diubah menjadi <em>absolute</em>.

Untuk lebih memahami, akan saya berikan kode HTML dan CSS sederhana. Semoga cukup untuk menambah koleksi potongan kode Anda ;)

<!DOCTYPE HTML>
<html>
<head>
<title>Float Menu</title>
<style type="text/css">
  #header { height: 200px; width:800px; background-color: #3333FF; }
  .sidebar { float: left; width: 110px; border: 1px solid #e6e6e6; }
  .content { float: left; height: 2000px; width: 690px; margin-right:10px; background-color:#00FF00 }
  #menu { width:100px; height:200px; background-color: #F0F0F0; }
  div.menu-absolute {	position: absolute; top: 210px; }
  div.menu-fixed { solid #E0E0E0;	top: 10px; position: fixed; }
  .footer { clear: both; width: 800px; background-color:#FF3399 }
 
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 
  var menu = $("#menu");
  var menuOriTop = menu.offset().top;
  var view = $(window);
 
  view.bind("scroll resize", function(){
 
    var menuViewTop = view.scrollTop();
    if ((menuViewTop > menuOriTop) && !menu.is(".menu-fixed")){
 
      menu.removeClass("menu-absolute").addClass("menu-fixed");
    }
 
    else if ((menuViewTop <= menuOriTop) && menu.is(".menu-fixed")){
 
      menu.removeClass("menu-fixed").addClass("menu-absolute");
    }
  });
});
 
</script>
</head>
<body>
  <div id="header">Header</div>
  <div class="content">content here</div>
  <div class="sidebar">
  <div id="menu" class="menu-absolute">Menu Float</div>
  </div>
  <div class="footer">footer</div>
</body>
</html>

Catatan yang direkomendasikan:

About Sibudi

Ubuntu user | Loves books | Blogger | Web Developer | Learn PHP, JavaScript, Ruby & Python the hard way

22. September 2011 by Sibudi
Categories: jQuery | Tags: , , , , | 7 comments

Comments (7)

  1. adisp007 says October 17, 2011 at 11:25 pm

    Mantap………. Thanks………

    Reply
  2. Sriyono Semarang says October 22, 2011 at 4:53 pm

    nggak diaplikasikan disini juga sekalian nehh 🙂

    Reply

  3. Pingback: Tab Sederhana dengan jQuery | Sibudi's Blog { }

  4. kuceng21 says December 29, 2011 at 11:45 pm

    Manntab gan, ini yang ane cari, mirip yang di toko bagun nih, tinggal modif dikit jadi dah,,,,

    Reply
  5. kolonel says September 21, 2012 at 1:42 am

    Sedikit saran ne master…
    kalau bisa sediakan link untuk demonya…
    jadi pengunjung bisa melihat hasilnya bagaimana sebelum dia mengaplikasikannya.
    thanks

    Reply

Leave a Reply

Required fields are marked *