Elemen-DIV Diam setelah discroll atau Menu Melayang

Banyak situs menerapkan menu sticky, termasuk 'Header' situs yang sedang Anda baca ini. Saya sendiri tidak menemukan padanan kata sticky ini dalam bahasa Indonesia. Saya menyamakan sticky ini dengan melengket atau melekat. Menu melengket diterapkan agar memudahkan pengunjung mengeksplor situs tanpa harus bolak-balik menggulung (scroll) laman. Menu akan tetap lengket meskipun laman digulung jauh ke bawah.

• Demo

 
Bagaimana membuatnya? Salin jQuery berikut dan letakkan di atas tag </body>.
Sesuaikan nama elemen yang akan dibuat sticky. Dalam contoh ini elemen yang saya sticky adalah 'menu'.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu .menu
    var stickyNavTop = $('.menu').offset().top; 
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();  
        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya        
        if (scrollTop > stickyNavTop) { 
            $('.menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('.menu').css({ 'position': 'relative' });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

Bagaimana jika saya ingin menu itu muncul hanya setelah discroll? Jika tidak discroll menu tersebut tersembunyi.

Memunculkan/menampilkan Menu setelah discroll

Gunakan jQuery berikut untuk memunculkan/menampilkan menu hanya setelah halaman discroll.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu .menu
    var stickyNavTop = $('.menu').offset().top; 
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();  
        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya        
        if (scrollTop > stickyNavTop) { 
            $('.menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('.menu').css({ 'position': 'absolute', 'top':-9999, 'left':-9999 });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

• Demo

 
Selamat belajar :)