Ditulis oleh: Ditulis pada: 4/30/2019
Membuat Sticky Header Hide on Scroll Down dan Show on Scroll Up - Tutorial ini direquest oleh sahabat Kompi pada postingan cara membuat menu melayang ketika discroll dengan CSS dan javascript. Kali ini kita akan membuat header melayang akan sembunyi ketika halaman discroll down dan akan tampil ketika discroll up dan ketika mencapai titik bawah halaman.
Berbeda dengan tutorial sebelumnya yang membuat sticky pada menu yang berada di bawah header, kali ini kita akan memberikan efek show hide pada header yang sudah melayang. Untuk itu saya mencari cara yang hanya menggunakan CSS dan javascript, dan berikut caranya.
Jadi pada situasi awalnya, header sudah melayang dan menempel di sisi atas halaman seperti gambar berikut:
Pada header tersebut bisa terdapat judul blog dan menu dengan posisi sejajar. Secara sederhana, kode HTML untuk header ini seperti contoh berikut:
<header class="header" role="banner">
<div class='content-wrapper'>
<h1>HEADER BLOG</h1>
<div class='topnav'>
<ul>
<li><a href='#' title='About'>About</a></li>
<li><a href='#' title='Contact'>Contact</a></li>
<li><a href='#' title='Privacy'>Privacy</a></li>
<li><a href='#' title='Sitemap'>Sitemap</a></li>
<li><a href='#' title='Pasang Iklan'>Pasang Iklan</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</header>Fokusnya di sini adalah menambahkan class="header" pada tag header.
Dan hal terpenting kedua adalah menggunakan CSS berikut untuk membuat header melayang dan memiliki efek slider ketika show hide header.
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
transition-timing-function: cubic-bezier(.215, .61, .355, 1);
-webkit-transition-property: -webkit-transform;
transition-property: transform
}
.header--hidden {
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%)
}Anda bisa menambahkan style lain pada CSS di atas untuk tampilan header-nya.
Kemudian tambahkan javascript berikut di atas kode </body>. Karena ini pure javascript, maka tidak memerlukan Jquery Library.
<script>
//<![CDATA[
/*
By Osvaldas Valutis, www.osvaldas.info
Available for use under the MIT License
*/
;
(function(document, window, index) {
'use strict';
var elSelector = '.header',
elClassHidden = 'header--hidden',
throttleTimeout = 500,
element = document.querySelector(elSelector);
if (!element) return true;
var dHeight = 0,
wHeight = 0,
wScrollCurrent = 0,
wScrollBefore = 0,
wScrollDiff = 0,
hasElementClass = function(element, className) {
return element.classList ? element.classList.contains(className) : new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
},
addElementClass = function(element, className) {
element.classList ? element.classList.add(className) : element.className += ' ' + className;
},
removeElementClass = function(element, className) {
element.classList ? element.classList.remove(className) : element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
},
throttle = function(delay, fn) {
var last, deferTimer;
return function() {
var context = this,
args = arguments,
now = +new Date;
if (last && now < last + delay) {
clearTimeout(deferTimer);
deferTimer = setTimeout(function() {
last = now;
fn.apply(context, args);
}, delay);
} else {
last = now;
fn.apply(context, args);
}
};
};
window.addEventListener('scroll', throttle(throttleTimeout, function() {
dHeight = document.body.offsetHeight;
wHeight = window.innerHeight;
wScrollCurrent = window.pageYOffset;
wScrollDiff = wScrollBefore - wScrollCurrent;
if (wScrollCurrent <= 0) // scrolled to the very top; element sticks to the top
removeElementClass(element, elClassHidden);
else if (wScrollDiff > 0 && hasElementClass(element, elClassHidden)) // scrolled up; element slides in
removeElementClass(element, elClassHidden);
else if (wScrollDiff < 0) // scrolled down
{
if (wScrollCurrent + wHeight >= dHeight && hasElementClass(element, elClassHidden)) // scrolled to the very bottom; element slides in
removeElementClass(element, elClassHidden);
else // scrolled down; element slides out
addElementClass(element, elClassHidden);
}
wScrollBefore = wScrollCurrent;
}));
}(document, window, 0));
//]]>
</script>Dan ini hasilnya.
Sumber kode: https://osvaldas.info/auto-hide-sticky-header