Sticky Menu adalah suatu tampilan menu dengan posisi tetap ketika kita melakukan scroll di halaman website. Dan pada kali ini saya akan membahas tentang sticky menu pada artikel tentang Cara Membuat Sticky Menu Dengan Menggunakan AngularJs.

Untuk membuat Sticky menu saya menggunakan beberapa metode dari jquery seperti offset top untuk mengetahui tinggi dari headernya. Karena menu sticky akan pada posisi tetap ketika header sudah tidak terlihat saat kita melakukan scroll.

Oke langsung saja langkah pertama Cara Membuat Sticky Menu Dengan Menggunakan AngularJs kita buat struktur htmlnya seperti berikut ini.

Jika sudah maka kita akan membuat style cssnya seperti di bawah ini.

Dan css di atas saya hanya akan menjelaskan yang berhubungan dengan posisi menu yang akan berubah ya teman-teman. Di dalam style css saya membuat .stuck dengan posisi fixed dan topnya 0px yang berarti akan membuat suatu elemen dengan nama kelas stuck berada di posisi tetap paling atas. Kelas ini akan saya tambahkan ke dalam div class=”some-element” ketika kita scroll dan posisi header sudah tidak terlihat.

Dan langkah selanjutnya saya akan membuat fungsi angularjs dimana didalamnya ada beberapa metode yang saya manfaatkan dari jquery.

Script di atas ada kondisi dimana jika nilai item.isStucknya bernilai tidak false dan nilai variable pos yang di dapat dari scroll lebih besar dari variable item.start atau tinggi header maka .stuck akan di tambahkan kedalam div class=”some-element”. Jika teman-teman buka di browser maka akan seperti pada gambar di bawah ini.

Cara Membuat Sticky Menu Dengan Menggunakan AngularJs

Demikian artikel tentangĀ  Cara Membuat Sticky Menu Dengan Menggunakan AngularJs. Semoga dapat bermanfaat dan selamat mencoba.