Month: August 2013

Cara Membuat Header Fix (tidak bergerak) ketika di scroll seperti di google plus, atau time line facebook

solikularip4 Comments

Cara untuk melakukan header tetap pada posisi atas ketika halaman web discroll salah satunya dengan menggunakan java script.

pertama buat code html sembarang, semisal :

<div id="header-fix">HEADER FIX</div>

kemudian dengan menambah code javascript :

var target = $('#header-fix');
var div_position = target.offset().top;

$(window).scroll(function() { 
    var y_position = $(window).scrollTop();
    if(y_position > div_position) {
        target.addClass('fixed');
    }
    else {
        target.removeClass('fixed');
    }
}

Keterangan dari code javascript :

1. Mengambil target dan mengambil posisinya

var target = $('#header-fix');
var div_position = target.offset().top;

1. Ketika event scroll (halaman web di scroll) $(window).scroll()maka akan menjalankan fungsi didalamnya

2. Isi fungsi didalamnya diantarannya

mengambil posisi dari posisi scroll atas dari halaman web, kemudian mencocokan dengan posisi dari target  $('#header-fix') jika posisi target lebih kecil maka dibuat fix (ditambah css position:fixed) jika tidak maka css tersebut dihilangkan.

 

Ya cukup sekian, Anda bisa memberi command jika terasa kurang paham.

Sumber Referensi