Cara Menciptakan Hidangan Fixed Menghilang Ketika Di Scroll

Halo teman Blanter, kali ini aku akan membagikan tutorial Cara Membuat Menu Fixed Menghilang ketika di Scroll.

Pada tutorial kali ini hanya di khususkan bagi pengguna template yang memiliki Header atau Menu melayang pada blognya, dan menciptakan header hidangan tersebut menghilang ketika di scroll ke bawah. Biasanya blog dengan hidangan atau header yang melayang akan menutupi sedikit konten artikel dan menciptakan pengunjung merasa tidak yummy ketika membaca artikel tersebut.

Dengan tutorial ini ketika pengunjung melaksanakan scroll halaman ke bawah, header atau hidangan yang melayang tadi akan menghilang ke atas dan akan muncul kembali ketika scroll ke atas.

Demo

Tutorial Membuat Menu/Header Fixed Menghilang ketika di Scroll

Buka Blogger > Template > Edit HTML > kemudian masukan CSS di bawah ini sempurna di atas aba-aba ]]></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 sempurna di atas aba-aba </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 dapat aku bagikan kali ini. Semoga bermanfaat bagi sobat.

Sumber https://www.idblanter.com