Membuat Header Mengecil Saat Di Scroll

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

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

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

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

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

cara menciptakan sajian melayang bersama header

• Tutorial Pertama kita akan menciptakan / menambah sajian kafe dan header, bukan mengedit yang sudah ada pada blog kalian. #lanjut

• Seperti Tutorial Sebelumnya, Login dulu ke blogger.com

• Setelah Login cari aba-aba </head>

• Setelah ketemu, masukan aba-aba 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 kini kita akan memasang Htmlnya, kalian dapat pasang dibawah aba-aba <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 aba-aba dibawah ini sempurna 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 bila kalian ingin merubah header yang sudah ada pada blog kalian menjadi sticky dan saat di scroll headernya menjadi kecil..Agan harus merubah, menyesuaikan aba-aba 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 diubahsuaikan dengan header yang sudah ada, jangan lupa mengedit css yang ada di atas sesuai dengan yang sahabat mau...

• Seperti pada css smaller di atas, sesuaikan ukurannya dengan yang kalian mau.

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

Kalo tidak ada yang dimengerti pada tutorial ini, silahkan bertanya di kolom komentar :)