Membuat Sidebar fixed dengan jQuery

23/10/2014    Rully Febrian    1658     Website

Benar-benar konsep yang sederhana, sebuah sidebar akan mengikuti konten ketika dilakukan scroll. Sidebar ini telah diberi posisi fixed dengan nilai z-index lebih besar dari elemen yang terdapat dalam halaman. Bukan dengan CSS saja, javascript juga berperan penting dalam membuat efek window.scroll yang dapat mengukur seberapa jauh jendela pengguna bergulir dan menempatkan sidebar pada posisi konstan.

Agar lebih mengerti tentang sidebar fixed silahkan buat halaman html sederhana dengan konsep 2 kolom yang berisikan sidebar dan konten  seperti berikut :

Membuat-Sidebar-fixed-dengan-jQuery

Untuk melihat hasil yang maksimal isikan tag <p> dengan kontent yang banyak. simpan kode diatas dan atur stylenya seperti berikut :

Membuat-Sidebar-fixed-dengan-jQuery

SImpan style diatas. kemudian panggil jquery plugin sticky sidebar bisa kalian download disini. kemudian tambahkan script sebagai berikut :

Membuat-Sidebar-fixed-dengan-jQuery

Jika ingin melihat hasilnya silahkan klik DEMO.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More