Cara Membuat Show Hide Header Median Ui

Selamat datang di lutfisyafii.com. Kali ini saya mau berbagi lagi tutorial Median ui. Sesuai judulnya, yaitu Membuat Show Hide Header Median Ui.

Header Show Hide atau hilang muncul adalah header yang ketika pengguna scroll ke bawah akan hilang dan ketika scroll ke atas akan muncul kembali.

Seperti yang kalian tahu, template blogger Median Ui bawaannya menggunakan header relative yang membuat pengguna harus scroll sampe di ujung atas untuk melihat kembali header yang tenggelam. Hal tersebut tentunya menyulitkan pengguna.

Baca juga: Memunculkan Header Median Ui di Halaman Artikel.

Oleh sebab itu, kita perlu membuat Show Hide Header otomatis di Median Ui. Dengan tujuan untuk memudahkan pengguna, sekaligus memamerkan identitas blog yang kita miliki agar mudah dikenal.

Membuat Show Hide Header Median Ui

Jika kamu ingin headernya hilang dan muncul otomatis seperti di blog ini, silahkan ikuti caranya di bawah ini sampai selesai.

1. Pertama, silahkan buka menu Tema > Edit HTML.
2. Cari kode header{position:relative;
3. Ubah menjadi header{position:sticky;
   
   
   
   
   
4. Selanjutnya, cari tag /* Header Section */
5. Salin dan tempelkan kode #header.show{top: -70px} di bawah /* Header Section */
   
6. Berikutnya kita membutuhkan kode Javascript untuk ditempelkan di atas kode </body>. Tenang saja karena ini JS biasa, bukan jQuery, jadi tidak memberatkan.
   

   <script> //<![CDATA[
     /*
       Sticky Header. Auto hide on scroll bottom, show on scroll top.
     */
     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;
     }
   //]]> </script>

   
   
   
   
   
7. Terakhir, klik Simpan tema dan selesai.

Cara di atas juga bisa diterapkan untuk template lainnya. Tetapi mungkin setiap template memiliki "id" yang berbeda. Sehingga kode JS ini document.getElementById("header") akan berbeda. Id tersebut bisa diubah sesuai Id header yang digunakan.

Demikian itulah cara membuat header show hide pada template Median Ui. Semoga bermanfaat.