Sibudi </>

Mengubah Element Position secara Dinamis dengan jQuery

Written by

Sibudi

in

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");
    }
  });
});

Penjelasannya, kode jQuery di atas akan memeriksa apakah elemen menu telah digulir melewati batas atas mula-mula, jika sudah melewati, maka atribut position dari elemen menu akan diubah menjadi fix. Sebaliknya, jika elemen menu kurang dari batas atas mula-mula, maka atribut position akan diubah menjadi absolute.

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>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20%23header%20%7B%20height%3A%20200px%3B%20width%3A800px%3B%20background-color%3A%20%233333FF%3B%20%7D%3Cbr%20%2F%3E%0A%20%20.sidebar%20%7B%20float%3A%20left%3B%20width%3A%20110px%3B%20border%3A%201px%20solid%20%23e6e6e6%3B%20%7D%3Cbr%20%2F%3E%0A%20%20.content%20%7B%20float%3A%20left%3B%20height%3A%202000px%3B%20width%3A%20690px%3B%20margin-right%3A10px%3B%20background-color%3A%2300FF00%20%7D%3Cbr%20%2F%3E%0A%20%20%23menu%20%7B%20width%3A100px%3B%20height%3A200px%3B%20background-color%3A%20%23F0F0F0%3B%20%7D%3Cbr%20%2F%3E%0A%20%20div.menu-absolute%20%7B%09position%3A%20absolute%3B%20top%3A%20210px%3B%20%7D%3Cbr%20%2F%3E%0A%20%20div.menu-fixed%20%7B%20solid%20%23E0E0E0%3B%09top%3A%2010px%3B%20position%3A%20fixed%3B%20%7D%3Cbr%20%2F%3E%0A%20%20.footer%20%7B%20clear%3A%20both%3B%20width%3A%20800px%3B%20background-color%3A%23FF3399%20%7D%3C%2Fp%3E%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object mce-object-style" width="20" height="20" alt="&lt;style&gt;" />

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fcode.jquery.com%2Fjquery-latest.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object mce-object-script" width="20" height="20" alt="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%3Cbr%20%2F%3E%0A%24(document).ready(function()%20%7B%3C%2Fp%3E%0A%3Cp%3E%20%20var%20menu%20%3D%20%24(%22%23menu%22)%3B%3Cbr%20%2F%3E%0A%20%20var%20menuOriTop%20%3D%20menu.offset().top%3B%3Cbr%20%2F%3E%0A%20%20var%20view%20%3D%20%24(window)%3B%3C%2Fp%3E%0A%3Cp%3E%20%20view.bind(%22scroll%20resize%22%2C%20function()%7B%3C%2Fp%3E%0A%3Cp%3E%20%20%20%20var%20menuViewTop%20%3D%20view.scrollTop()%3B%3Cbr%20%2F%3E%0A%20%20%20%20if%20((menuViewTop%20%3E%20menuOriTop)%20%26%26%20!menu.is(%22.menu-fixed%22))%7B%3C%2Fp%3E%0A%3Cp%3E%20%20%20%20%20%20menu.removeClass(%22menu-absolute%22).addClass(%22menu-fixed%22)%3B%3Cbr%20%2F%3E%0A%20%20%20%20%7D%3C%2Fp%3E%0A%3Cp%3E%20%20%20%20else%20if%20((menuViewTop%20%3C%3D%20menuOriTop)%20%26%26%20menu.is(%22.menu-fixed%22))%7B%0A%20%0A%20%20%20%20%20%20menu.removeClass(%22menu-fixed%22).addClass(%22menu-absolute%22)%3B%0A%20%20%20%20%7D%0A%20%20%7D)%3B%0A%7D)%3B%0A%20%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object mce-object-script" width="20" height="20" alt="&lt;script&gt;" />
</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 lain yang direkomendasikan:

Comments

7 responses to “Mengubah Element Position secara Dinamis dengan jQuery”

  1. adisp007 Avatar
    adisp007

    Mantap………. Thanks………

    Reply
  2. Sriyono Semarang Avatar
    Sriyono Semarang

    nggak diaplikasikan disini juga sekalian nehh 🙂

    Reply
    1. Sibudi Avatar
      Sibudi

      Wah telat banget jawabnya ya 😀
      Tapi sudah lama teknik ini saya aplikasikan di menu sebelah kiri website ini 🙂

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

    […] yang didapat dengan membuat sebuah navigasi tab dengan jQuery adalah halaman tidak perlu dimuat ulang hanya untuk berganti tab yang aktif. Kenapa hal itu bisa […]

    Reply
  4. kuceng21 Avatar
    kuceng21

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

    Reply
  5. kolonel Avatar
    kolonel

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

    Reply
    1. Sibudi Avatar
      Sibudi

      Terima kasih atas sarannya.
      Tapi karena source code sudah saya sertakan seutuhnya, jadi bisa langsung dicoba sendiri.

      Reply

Leave a Reply to adisp007 Cancel reply

Your email address will not be published. Required fields are marked *

More posts