Rendimiento de navegación de cabecera Sticky en JavaScript puro

Vista prévia

Descripción

Una solución de JavaScript puro y de alto rendimiento para hacer que la navegación del encabezado sea pegajosa en el desplazamiento usando CSS Position: Sticky Property.

Funcionamiento

Cree la navegación del encabezado siguiendo el marcado HTML como este:

<header class="header sticky sticky--top js-header">

<nav class="navigation">


<ul class="navigation__list navigation__list--inline">



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



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



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



<li class="navigation__item"><a href="#">Blog</a></li>



<li class="navigation__item"><a href="#">Social</a></li>


</ul>

</nav>
</header>

Los estilos CSS primarios:

.header {

background-color: #f7f7f7;

padding-bottom: 1em;

padding-top: 1em;
}


.header::after {

bottom: 0;

box-shadow: 0 0.0625em 0.5em rgba(0, 0, 0, .3);

content: '';

left: 0;

opacity: 0;

position: absolute;

right: 0;

top: 0;

-webkit-transition: opacity 0.3s;

transition: opacity 0.3s;

z-index: -1;
}

.header.is-active::after {

opacity: 1;
}

.navigation a {

color: inherit;

display: block;

text-decoration: none;
}

.navigation .is-active {

background-color: #000;

color: #fff;

padding-left: 1em;

padding-right: 1em;

border-radius: 999px;
}

.navigation__list {

list-style: none;

margin: -0.5em;

padding: 0;
}

.navigation__list--inline {

display: -webkit-box;

display: -ms-flexbox;

display: flex;
}

.navigation__item {

margin: 0.5em;
}

Pegue la navegación de cabecera en la parte superior utilizando la posición CSS : Sticky Property:

.sticky {

position: -webkit-sticky;

position: sticky;

will-change: transform;
}

.sticky--top {

top: 0;
}

El JavaScript principal para agregar o quitar clases en función de los eventos de desplazamiento.

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) {


$$header.classList.add('is-active');

} else {


$$header.classList.remove('is-active');

}
}

var $$header = document.querySelector('.js-header');

window.addEventListener('scroll', throttle(onScroll, 25));