Membuat Header Mengecil Ketika 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.
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..Kalian harus merubah, menyesuaikan kode yang ada di script berikut dengan tag, id atau class dari header anda..
<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.
Lihat DEMO klik tombol DEmo

0 Comments

Post a Comment