Cara Membuat Menu Fixed Menghilang Saat di Scroll

22 October 2016

Membuat Menu Fixed Menghilang Ketika di Scroll

Halo sobat Blanter, kali ini saya akan membagikan tutorial Cara Membuat Menu Fixed Menghilang saat di Scroll.

Pada tutorial kali ini hanya di khususkan bagi pengguna template yang mempunyai Header atau Menu melayang pada blognya, dan membuat header menu tersebut menghilang saat di scroll ke bawah. Biasanya blog dengan menu atau header yang melayang akan menutupi sedikit konten artikel dan membuat pengunjung merasa tidak enak saat membaca artikel tersebut.

Dengan tutorial ini saat pengunjung melakukan scroll halaman ke bawah, header atau menu yang melayang tadi akan menghilang ke atas dan akan muncul kembali saat scroll ke atas.

Demo

Tutorial Membuat Menu/Header Fixed Menghilang saat di Scroll

Buka Blogger > Template > Edit HTML > lalu masukan CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style>

/* Floating Wrapper CSS */
.float_wrapper{position:fixed;left:0;top:0;right:0;transition:all .3s ease-out;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
.scroll{top:-90px}
.no-scroll{top:0;z-index:99}

Tambahkan Tag HTML berikut pada Tag Header atau Menu yang melayang.

Contoh Tag Header Melayang

class='float_wrapper'

Selanjutnya tambahkan Javascript di bawah ini tepat di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Floating Menu
$(function(){var e=$(document).scrollTop();var t=$(".float_wrapper").outerHeight();$(window).scroll(function(){var n=$(document).scrollTop();if($(document).scrollTop()>=50){$(".float_wrapper").css("position","fixed")}else{$(".float_wrapper").css("position","fixed")}if(n>t){$(".float_wrapper").addClass("scroll")}else{$(".float_wrapper").removeClass("scroll")}if(n>e){$(".float_wrapper").removeClass("no-scroll")}else{$(".float_wrapper").addClass("no-scroll")}e=$(document).scrollTop()})})
//]]>
</script>

Simpan Template.

Sekian tutorial yang bisa saya bagikan kali ini. Semoga bermanfaat bagi sobat.

Dunia Blanter