Membuat Sticky Header dan Logo Mengecil di Oxygen Builder

Artikel ini berisi tentang tutorial bagi yang menggunakan Oxygen Builder membuat header sticky dan image logo berubah mengecil/mengkerut (shrink)
Updated: 1 Januari 2021
Bagikan:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
Create Sticky Header and Shrink Logo in 3 Step with Oxygen Builder

Apa yang ingin kami capai disini adalah div / section / header sticky dan logo mengkerut (shrink), tetapi kami tidak menggunakan element Header Builder dari Oxygen Builder, melainkan menggunakan div atau section.

Dengan tutorial ini, kita akan lebih bebas mengaplikasikan fungsi tersebut untuk element lain sesuai kasus dan kebutuhan kita masing-masing karena tidak harus menggunakan element Header Builder.

Catatan: Anda tetap dapat menggunakan tutorial ini biarpun tidak menggunakan Oxygen Builder, asalkan bisa edit html & menambah kode CSS+Javascript ke dalam website anda.

Baca juga : Oxygen Builder, plugin Page Builder WordPress terbaik?

Referensi

  1. Shrinking Header dari SupaDezign.

Artikel ini menjelaskan bagaimana membuat header builder sticky dan shrinking. Tidak ada kode dalam artikel ini yang kami gunakan, tetapi kami mengambil ide-nya.

  1. Sticky Section in Oxygen dari WPDevDesign.

Artikel ini menjelaskan bagaimana membuat section/element menjadi sticky.

  1. How TO - Resize Header on Scroll dari W3schools.

Artikel ini menjelaskan bagaimana merubah ukuran huruf ketika header sticky setelah discroll ke bawah dan melewati ukuran tertentu.

Studi Kasus

Studi kasus yang saya gunakan adalah header website dari salah satu client kami The Supplier Shop.

Header-The-Supplier-Shop

Pada header tersebut ada 2 baris header yang dibuat dari 2 div:
1. Div1 header baris atas: menu dan info kontak
2. Div2 header baris bawah: logo, pencarian dan beberapa icon online shop.

Yang akan sticky hanya div2 header baris bawah. Untuk logo ukuran awalnya tinggi 80px, dan logo shrink ketika sticky tinggi menjadi 50px.

Catatan: Sebelumnya, catat ID image logo tersebut, dalam kasus ini : image-155-1794 atau anda ganti ID nya menjadi ID lain yang mudah diingat karena dibutuhkan javascript sebagai element target yang dirubah.

Langkah-langkahnya

  1. Buat custom css untuk sticky.
.sticky {
   position: sticky;
   position: -webkit-sticky;
   top:0;
   left:0;
   padding-top:5px;
   padding-bottom:5px;
 }
  1. Tambahkan class sticky ke div target sehingga div2 akan menjadi sticky header.
  1. Tambahkan javascript yang berfungsi jika element sudah scroll turun lebih dari 20px, maka akan mengecilkan tinggi gambar logo dari 80px menjadi 50px. Supaya terlihat lebih halus transisinya, maka kami menambahkan efek transisi 0.3 detik.
// When the user scrolls down 20px from the top of the document, resize the header's font size
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("image-155-1794").style.height = '50px';
document.getElementById("image-155-1794").style.transition = '0.3s';
} else {
document.getElementById("image-155-1794").style.height = '80px';
}
}

Hasil Akhir

Dari tiga langkah tersebut, maka hasilnya seperti ini :

Penutup

Demikianlah tutorial singkat tentang bagaimana caranya membuat logo image pada header menjadi lebih kecil/shrink pada Oxygen Builder. Tutorial ini bisa juga digunakan untuk keperluan lain dengan modifikasi-modifikasi tertentu sesuai kebutuhan anda.

Jika memiliki saran untuk perbaikan tulisan ini ataupun tanggapan lainnya, silahkan meninggalkan komentar anda dibawah tulisan ini.

Salam Digital!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

ARTIKEL TERBARU
Cara Membuat Menu Di Luar Kanvas dengan Oxygen Builder
Artikel ini menjelaskan tentang cara pembuatan menu di luar kanvas pada website yang menggunakan CMS WordPress dan plugin Oxygen Builder
Baca selengkapnya....
Konversi Website ke Oxygen Builder (Studi Kasus)
Apakah anda ingin mengkonversi website yang menggunakan Oxygen Builder? Berikut contoh kasus dan peningkatan kinerja hasil optimasinya.
Baca selengkapnya....
Bagaimana Cara Membuat Slider Dinamis dengan Flickity di Oxygen Builder Repeater?
Tutorial ini menjelaskan cara membuat slider dinamis menggunakan flickity yang digabungkan dengan elemen Oxygen Builder Repeater.
Baca selengkapnya....
PAKET LENGKAP PEMBUATAN WEBSITE
Digitalizer menawarkan jasa pembuatan website untuk company profile, toko online, event organizer, lembaga pendidikan ataupun bidang lainnya. Anda tidak perlu memikirkan tentang domain, webhosting/server, DNS, email, desain, development, security serta masalah teknis lainnya. Cukup siapkan content website anda saja, sisanya kami yang mengerjakannya.
Semua paket pembuatan website sudah termasuk maintenance 1 tahun!
HOT LINK!
logo digitalizer
© 2020 - 2021 Digitalizer My ID - Allright Reserved