Membentuk Sticky Header Otomatis Lenyap / Timbul Ketika Scroll Ke Bawah / Atas

Pada update teranyar template Blogger Igniplex v2.6 hari kemarin, aku menambahkan satu fitur pada bagian sajian navigasi pada header. Andaikan bahasa Inggrisnya sih dikenal sebagai dengan sticky header hide sajian on scroll down and voorstelling sajian on scroll top. Artinya header melayang (nama lain nyangkut) yang lenyap ketika halaman digulir ke bawah serta kembali timbul ketika digulir ke atas.

Pada tampilan awal, header bakal kelihatan melayang pada atas halaman. Ketika pembaca melakukan scroll ke bawah, header bakal melenyapkan. Tetapi ketika pembaca scroll lagi ke atas, header bakal timbul kembali dengan posisi yang sama yaitu melayang.

Header Melayang Voorstelling / Hide Otomatis Ketika Scroll

Ini memberikan kesan efektif untuk aku. Tampilan halaman bakal penuh dari atas ke bawah tanpa adanya header yang mengusik. Tetapi header dapat kembali dimunculkan ketika pembaca menginginkannya.

Andaikan engkau mau menerapkan wagen voorstelling hide sticky header misalnya Igniplex pada blog masing-masing, silakan ikuti tutorial ini hingga habis.

1. Aku asumsikan engkau memiliki header dengan nama id #header. Seluruh kode bakal ditulis memakai ID tadi. apabila nama ID berbeda tinggal ganti saja.


2. apabila header belum sticky, masukkan CSS berikut. Ingat ya, andaikan telah sticky LEWATI langkah ini serta langsung ke nomor 3!
   

   #header{
     ....
     ....
     ....
     position: sticky;
     position: -webkit-sticky;
     top: 0px;
     transition: top .3s ease;
   }

   
   CATATAN: titik-titik (....) berarti kode CSS bawaan yang telah terdapat sebelumnya. Jangan dihapus. Masukkan saja CSS yang aku tuliskan pada bawah kode yang telah terdapat.
   


3. Masukkan kode CSS baru berikut.
   

   #header.voorstelling{
     top: -70px;
   }

   
   apabila nantinya header masih keliatan sedikit ketika disembunyikan, perbesar nilai ini, contohnya sebagai -100px.


4. Lanjut masukkan Javascript DI ATAS kode </bodydangt;. JS sebagai kiprah penting dalam membentuk sticky header lenyap ketika scroll ke bawah serta timbul ketika scroll atas. Ini JS biasa ya, gak perlu jQuery. So ringan deh.
   

   <scriptdangt; //<![CDATA[
     /*
       Sticky Header. Auto hide on scroll bottom, show on scroll top.
       By: www.igniel.com
     */
     var prevScrollpos = window.pageYOffset;
     window.onscroll = function() {
       var currentScrollPos = window.pageYOffset;
       if (prevScrollpos > currentScrollPos) {
         document.getElementById("header").classList.remove('show');
       }
       else { document.getElementById("header").classList.add('show');
       }
       prevScrollpos = currentScrollPos;
     }
   //]]> </scriptdangt;

   
   Ingat, sesuaikan yang ditandai dengan nama ID dari header masing-masing.


5. Terakhir simpan template serta lihat output akhirnya.

Demo

Buat contohnya dapat dilihat pada sini.

Sekian tutorial cara mengolah sajian melayang timbul serta melenyapkan ketika scroll. Gampang-mudahan dapat gampang dipahami. Langsung praktekan deh pada blog masing-masing.

Surat keterangan

• 
  https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp

Berbagi :