Cara Membuat Menu Header Atau Navigasi Melayang Ketika Di Scroll
www.azid45.web.id - Cara Membuat Menu Header atau Navigasi Melayang Ketika Di Scroll. Assalamualakum.wr.wb, alhamdulillah kali ini akhirnya saya berhasil mencari cara yang efektif dan bagus agar menu header atau navigasi kiita bisa melayang ketika di scroll. Memang didunia blogger sekarang, tak asing lagi menu header maupun navigasi melayang atau fixed ketika di scroll dan dengan hal tersebut maka blog kita akan menjadi keren.
Sebenarnya banyak tutorial yang menyajikan cara tersebut, akan tetapi bagi saya cara-cara yang banyak itu tidak sesuai dengan keinginan saya dan akhirnya saya mendapatkan cara yang bagus tampa mengubah css dan tampilan navigasi yang kebanyakan tutorial menyarankan navigasi dari hasil karya yang ada disetiap tutorial. Cara ini saya ambil dan sedikit saya ubah biar navigasi teman-teman tetap sama.
Ok. Untuk mengetahui cara mmbuat menu header atau navigasi hal yang pertama adalah buka blog sobat terlebih dahulu kemudian pilih menu theme atau template kemudian klik edit HTML.
Setelah masuk Edit HTML masukkan kode berikut in tepat diatas kode </head> atau <!--<head/>-->
<style>
.sticky.is-active {position:fixed; top: 0; left: 0; width: 100%}
</style>
Setelah mempaste kode tersebut, langkah selanjutnya adalah menambahkan class='sticky' didalam kode <nav> jika navigasi blog teman-teman ingin melayang bila discroll dan masukkan didalam kode <heder> jika header blog teman-teman yang ingin melayang bila discroll. Untuk lebih jelasnya lihat contoh berikut ini;
<html>
<head>
................................
..................................
.....................................
</head>
<body>
.............................
<header>
.......................................
.....................................
...................................
</header>
<nav>
....................................
.................................
...................................
</nav>
................................
...................................
</body>
</html>
menjadi
<html>
<head>
................................
..................................
.....................................
</head>
<body>
.............................
<header class='sticky'>
.......................................
.....................................
...................................
</header>
<nav class='sticky'>
....................................
.................................
...................................
</nav>
................................
...................................
</body>
</html>
Langkah selanjutnya adalah copy java script berikut tepat diatas kode </body> atau </body>
<script type="text/javascript">
//<![CDATA[
function throttle(fn, delay) {var last = undefined;var timer = undefined;return function () {var now = +new Date();if (last && now < last + delay) {clearTimeout(timer);timer = setTimeout(function () {last = now;fn();}, delay);} else {last = now;fn();}};} function onScroll() {if (window.pageYOffset) {$$html.classList.add('is-active');} else {$$html.classList.remove('is-active');}} var $$html = document.querySelector('.sticky');window.addEventListener('scroll', throttle(onScroll,25));
//]]>
</script>
Keterangan: Jika ada masalah dengan && maka ganti kode tersebut dengan & &
Langkah terakhir adalah Save Template.
Dari keseluruhan kode, dapat dilihat sebagai berikut;
<html>
<head>
................................
..................................
.....................................
</head>
<body>
.............................
<header>
.......................................
.....................................
...................................
</header>
<nav>
....................................
.................................
...................................
</nav>
................................
...................................
</body>
</html>
menjadi
<html>
<head>
................................
..................................
.....................................
<style>
.sticky.is-active {position:fixed; top: 0; left: 0; width: 100%}
</style>
</head>
<body>
.............................
<header class='sticky'>
.......................................
.....................................
...................................
</header>
<nav class='sticky'>
....................................
.................................
...................................
</nav>
................................
...................................
<script type="text/javascript">
//<![CDATA[
function throttle(fn, delay) {var last = undefined;var timer = undefined;return function () {var now = +new Date();if (last && now < last + delay) {clearTimeout(timer);timer = setTimeout(function () {last = now;fn();}, delay);} else {last = now;fn();}};} function onScroll() {if (window.pageYOffset) {$$html.classList.add('is-active');} else {$$html.classList.remove('is-active');}} var $$html = document.querySelector('.sticky');window.addEventListener('scroll', throttle(onScroll,25));
//]]>
</script>
</body>
</html>
Update:
Untuk lebih muda tanpa javascript kita bisa mengubah css header dengan menambahkan kode "position:fixed dan z-index:999", (Jika ada position:relative atau obsolute bisa ganti langsung dengan fixed), contohnya seperti ini
#header {height: 60px;margin: 0 auto;padding: 5px 10px;top: 0px;left: 0;background: #fff;box-shadow: 0px 0px 8px 0px #000;width: 100%;z-index: 999;position:fixed;}
Kekurangan dari membuat position fixed adalah akan memakan wrapper, untuk mengatasinya bisa menambahkan ;top-50px pada css wrapper (50 sesuaikan dengan tinggi header)
Cara ampuh dan paling efektik kita bisa membuatnya dengan menjadikan scticky, dengan menambahkan kode "position:-webkit-sticky;position:sticky;top:60px;z-index: 996".
Contoh:
#header {height: 60px;margin: 0 auto;padding: 5px 10px;top: 0px;left: 0;background: #fff;box-shadow: 0px 0px 8px 0px #000;width: 100%;position:-webkit-sticky;position:sticky;top:60px;z-index: 996
Demikian Cara Membuat Menu Header atau Navigasi Melayang Ketika Di Scroll. Semoga bermanfaat. Amin.
PERHATIAN:Jika anda ingin bertanya atau bantuan bisa kontak kami
contact atau 089677337414 - Terima kasih.
contact atau 089677337414 - Terima kasih.