22 October 2016

Cara Membuat Menu Fixed Menghilang Saat di Scroll

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.

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 HTML
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.
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic