Membuat Header Mengecil Ketika Di Scroll

menu-header-fixed-resize

Cara Membuat Menu Navigation Bar Dan Header Melayang Plus Mengecil Saat di Scroll

Cara membuat menu dan header blog melayang setelah discroll (sticky menu) dengan efect menyusut / mengecil ukuran heightnya. Tutorial kali ini kita akan membuat logo header atau judul blog dan menu navigasi menjadi fixed, melayang dan mengecil setelah di scroll ke bawah.

Bagi kalian yang ingin merubah atau menambah sebuah header dan menu bar di blognya dengan efect sticky / Posisi menu dan header Tetap terlihat dengan efect awal besar dan setelah di scroll nanti akan mengecil plus Responsive ketika di buka pada device yang lebih kecil..

Nah barang kali kalian ingin melihat tampilan dari Header Resize On Scroll with Animations ini, bisa kunjungi blog demo berikut ... Demo Tampilan Header Resize on Scroll

Sekarang kita lanjut ke tutorial cara membuat header fixed dengan efect resize pada blognya..

cara membuat menu melayang bersama header


  • Tutorial Pertama kita akan membuat / menambah menu bar dan header, bukan mengedit yang sudah ada pada blog kalian. #lanjut
  • Seperti Tutorial Sebelumnya, Login dulu ke blogger.com
  • Setelah Login cari kode </head>
  • Setelah ketemu, masukan kode berikut diatasnya
  • 
    <style type='text/css'>
      header1 {
       width: 100%;
       height: 150px;
       overflow: hidden;
       position: fixed;
       top: 0;
       left: 0;
       z-index: 999;
       background-color: #0683c9;
       -webkit-transition: height 0.3s;
          -moz-transition: height 0.3s;
          -ms-transition: height 0.3s;
          -o-transition: height 0.3s;
          transition: height 0.3s;
      }
      
      header1 h1#logo {
       font-family: "Oswald", sans-serif;
       font-size: 60px;
       font-weight: 400;
       line-height: 150px;
       display: inline-block;
       float: left;
       height: 150px;
        margin: 0;
        padding: 0;
       color: #fff;
       -webkit-transition: all 0.3s;
       -moz-transition: all 0.3s;
       -ms-transition: all 0.3s;
       -o-transition: all 0.3s;
       transition: all 0.3s;
      }
      
      header1 nav1 {
        display: inline-block;
        float: right;
      }
      
      header1 nav1 a {
      line-height: 150px;
      margin-left: 20px;
      color: #9fdbfc;
      font-weight: 700;
      font-size: 18px;
      text-decoration: none;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
      }
      
      /* smaller nav1 */
      
      header1 nav1 a:hover {
        color: #ffffff;
      }
      
      header1.smaller {
          height: 75px;
      }
      header1.smaller h1#logo {
          width: 150px;
          height: 75px;
          line-height: 75px;
          font-size: 30px;
      }
      header1.smaller nav1 a {
          line-height: 75px;
      }
      
      
      @media all and (max-width: 660px) {
          header1 h1#logo {
              display: block;
              float: none;
              margin: 0 auto;
              height: 100px;
              line-height: 100px;
              text-align: center;
          }
          header1 nav1 {
              display: block;
              float: none;
              height: 50px;
              text-align: center;
              margin: 0 auto;
          }
          header1 nav1 a {
              line-height: 50px;
              margin: 0 10px;
          }
          header1.smaller {
              height: 75px;
          }
          header1.smaller h1#logo {
              height: 40px;
              line-height: 40px;
              font-size: 30px;
          }
          header1.smaller nav1 {
              height: 35px;
          }
          header1.smaller nav1 a {
              line-height: 35px;
          }
      }
    </style>
    
    
    <script type='text/javascript'>
        function init() {
            window.addEventListener('scroll', function(e){
              var distanceY = window.pageYOffset || document.documentElement.scrollTop,
                shrinkOn = 200,
                header1 = document.querySelector("header1");
              if ((distanceY) > (shrinkOn)) {
                $(header1).addClass("smaller");
              } else { 
                if ($(header1).hasClass("smaller")) {
                  $(header1).removeClass("smaller");
                }
              }
          });
        }
        init();
      </script>
    
  • Lalu sekarang kita akan memasang Htmlnya, kalian bisa pasang dibawah kode <body>
  • 
        <header1 class='site-header1'>
          <div class='container clearfix'>
            <h1 id='logo'>
                    LOGO
                </h1>
            <nav1>
              <a href=''>Lorem</a>
              <a href=''>Ipsum</a>
              <a href=''>Dolor</a>
            </nav1>
          </div>
        </header1>
    
  • Nah untuk tutorial ini sudah selesai, kalian tinggal save dan lihat hasilnya..
Kalo pas di scroll header dan menunya tidak mengecil silahkan tambahkan kode dibawah ini tepat di atas </head>

<script type='text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");}
//]]>
</script>
  • Save template dan selesai..


Tapi jika kalian ingin merubah header yang sudah ada pada blog kalian menjadi sticky dan ketika di scroll headernya menjadi kecil..Agan harus merubah, menyesuaikan kode yang ada di script berikut dengan tag, id atau class dari header agan..

<script type='text/javascript'>
    function init() {
        window.addEventListener('scroll', function(e){
          var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 200,
            header1 = document.querySelector("header1");
          if ((distanceY) > (shrinkOn)) {
            $(header1).addClass("smaller");
          } else { 
            if ($(header1).hasClass("smaller")) {
              $(header1).removeClass("smaller");
            }
          }
      });
    }
    init();
  </script>

  • Setelah disesuaikan dengan header yang sudah ada, jangan lupa mengedit css yang ada di atas sesuai dengan yang sobat mau...
  • Seperti pada css smaller di atas, sesuaikan ukurannya dengan yang kalian mau.


Mungkin itu saja untuk tutorial kali ini tentang Cara Membuat Menu Dan Header Melayang Setelah Discroll (Sticky Menu) Dan memberikan efect menyusut ini bermanfaat ya :)

Kalo tidak ada yang dimengerti pada tutorial ini, silahkan bertanya di kolom komentar :)
14 komentar
  1. Itu bisa digunakan disemua template kan ?

    ReplyDelete
  2. Kalo tutorial buat ngilangin header saat di scrool ke bawah gimana?

    ReplyDelete
    Replies
    1. Headernya jangan di bikin fixed gan.
      Coba kasih css relative..

      Agan pake template Simplify 2 Responsive 2016

      Coba cari kode ini ↓

      #header
      Lalu liat ke bawahnya ada css seperti ini ↓
      position: fixed;

      Rubah jadi ↓
      position: relative;

      Save template

      Delete
  3. Mas kalo lebarnya disesuain sama lebar templatenya gimana?

    ReplyDelete
    Replies
    1. Itu Lebarnya udah 100% jadi otomatis ngikutin lebar bungkusnya..
      Kalo pengen di sesuain atur aja width: 100%;nya

      Delete
    2. thanks mas mantap tutornya

      Delete
  4. mas apa gak ada tutor buat menu navigasi sticky kyk blog ini ?

    ReplyDelete
  5. Mas itu kalo header1 nya pengen diganti pake class sendiri, nulis di script nya gmn? kan yang mas pake itu tag header1, nah sama mau ganti pake nama class sendiri. apakah perlu penambahan code di depan code class nya? misalkan:
    header1 = document.querySelector("header1");
    jadi
    class.flx-header = document.querySelector("class.flx-header");

    ReplyDelete
    Replies
    1. Agan cukup cari kode ini document.querySelector("header1");
      .
      Lalu rubah dengan CLASS / ID
      .
      Keterangan
      .
      Kalo agan menggantinya dengan class kasih tanda (.) titik, kalo id tambahkan tanda (#) pagar
      .
      Contoh kalo d ganti pake class
      .
      document.querySelector(".header1");
      .
      Contoh kalo pake ID
      .
      document.querySelector("#header1");
      .
      Selamat mencoba

      Delete
  6. Cara mengganti header lama dengan header ini gimnana? Apa saja script yg kudu dihapus?

    ReplyDelete