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)
Share:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
Artikel Terkait
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';
}
}

/**OR you can add and remove class, I think this methode is better**/
jQuery(function() {
    var header = jQuery(".header");
    jQuery(window).scroll(function() {
        var scroll = jQuery(window).scrollTop();

        if (scroll >= 20) {
            header.addClass("someClass");
        } else {
            header.removeClass("someClass");
        }
    });
});

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.

Artikel Terkait

restore from backup WordPress with WP CLI and SSH
Restore Backup WordPress dengan WP CLI & SSH
Cara me-restore (mengembalikan) data WordPress kita dengan WP CLI & SSH.
Backup Cepat WordPress dengan WP CLI & SSH
Backup WordPress Cepat dengan WP CLI & SSH
Cara backup WordPress secara cepat dengan 1 perintah WP CLI dan 1 perintah SSH, serta membuat script backup dan script autobackup.
Foto-bersama-setelah-pelatiham-implementasi-e-commerce
Pelatihan Implementasi e-Commerce di Fakultas Pertanian Universitas Yudharta
Artikel ini bercerita tentang partisipasi kami dalam program implementasi e-Commerce yang diadakan Prodi Ilmu dan Teknologi Pangan, Fakultas Pertanian, Universitas Yudharta Pasuruan.
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!
Kembali ke atas
cross