Cara Mengaplikasikan Headroom.js pada WordPress dan Oxygen Builder

Mengapa menggunakan Headroom.js?

Salah satu trend website saat ini adalah menggunakan fixed header untuk memudahkan navigasi bagi pengunjung, akan tetapi teknik ini akan mengurangi luasnya area baca (viewport) dan bisa jadi akan mengurangi kenyamanan pada device mobile yang notabene memiliki area baca yang lebih kecil.

Dengan menggunakan javascript headroom maka pengunjung yang sedang membaca dan biasanya kondisi scroll turun ke bawah (kalau baca scroll keatas kayaknya ga ada ya?) akan memiliki area baca yang lebih luas dan merasa lebih nyaman.

Referensi Headroom.js

Anda bisa mengetahui lebih banyak tentang pembuat headroom js di halaman ini termasuk juga keterangan setting dan link download scriptnya.

Dibawah ini saya membuat langkah-langkah menggunakan Headroom.js di WordPress yang menggunakan Oxygen Builder, namun pada prinsip dasarnya anda dapat menggunakannya pada website apapun.

Header website ini juga menggunakan headroom!

Langkah-langkah instalasi Headroom.js

1. Tambahkan script html untuk inisiasi headroom js

<script src="https://unpkg.com/headroom.js"></script>

<script>
var headerx = document.querySelector('header');
var headroom = new Headroom(headerx);
headroom.init();
</script>

2. Tambahkan css untuk membuat header fixed dan efek transisi headroom

.headroom {
will-change: transform;
transition: transform 200ms linear;
}

.headroom--pinned {
transform: translateY(0%);
}

.headroom--unpinned {
transform: translateY(-100%);
}

header {
  position:fixed;
}

3. Pastikan elemen header memiliki id "header" dan css class "headroom"

4. Simpan dan lihat di halaman depan, hapus cache jika menggunakan plugin cache

Dibawah ini video contoh hasil aplikasi headroom js pada header, perhatikan bagian headernya (bagian atas berwarna biru yang ada logo digitalizer).

Penutup

Demikian cara mengaplikasikan Headroom.js di WordPress yang menggunakan Oxygen Builder. Jika ada pertanyaan atau tanggapan silahkan gunakan kolom komentar dibawah.

Salam Digital!