Auto-Reveal navegación de cabecera Sticky con JavaScript puro y CSS

Vista prévia

Descripción

Una navegación de encabezado Sticky que se oculta o revela automáticamente en función del comportamiento de desplazamiento.

Características

• Auto se oculta al desplazarse hacia abajo.
• Auto revela al desplazarse hacia arriba.
• Auto revela cuando se llega al final de la página.

Funcionamiento

Cree una navegación de cabecera utilizando una lista de > de < NAV.

<header class="header" role="banner">

<nav>


<ul>



<li class="active"><a href="#">Home</a> </li>



<li><a href="#">Services</a> </li>



<li><a href="#">About</a> </li>



<li><a href="#">Contact</a> </li>


</ul>

</nav>
</header>

El CSS requerido para la navegación del encabezado. El JavaScript comprobará esta clase.

.header {

width: 100%;

position: fixed;

z-index: 1000;

top: 0;

left: 0;

height: 85px;

border: none;

background-color: rgba(255,255,255,1);

box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.2);
}

El JavaScript para activar la navegación de cabecera inteligente.

;(function(document, window, index) {

'use strict';


var elSelector = '.header',


element = document.querySelector(elSelector);


if (!element) return true;


var elHeight = 0,


elTop = 0,


dHeight = 0,


wHeight = 0,


wScrollCurrent = 0,


wScrollBefore = 0,


wScrollDiff = 0;


window.addEventListener('scroll', function() {


elHeight = element.offsetHeight;


dHeight = document.body.offsetHeight;


wHeight = window.innerHeight;


wScrollCurrent = window.pageYOffset;


wScrollDiff = wScrollBefore - wScrollCurrent;


elTop = parseInt(window.getComputedStyle(element).getPropertyValue('top')) + wScrollDiff;



if (wScrollCurrent <= 0)



element.style.top = '0px';



else if (wScrollDiff > 0)



element.style.top = (elTop > 0 ? 0 : elTop) + 'px';



else if (wScrollDiff < 0) {



if (wScrollCurrent + wHeight >= dHeight - elHeight)




element.style.top = ((elTop = wScrollCurrent + wHeight - dHeight) < 0 ? elTop : 0) + 'px';




else




element.style.top = (Math.abs(elTop) > elHeight ? -elHeight : elTop) + 'px';


}



wScrollBefore = wScrollCurrent;

});

}(document, window, 0));