Navegación superior fija inteligente en JavaScript puro

Vista prévia

Descripción

Sólo otra solución de JavaScript para crear una navegación de sitio inteligente que auto se esconde en el desplazamiento hacia abajo y se revela de nuevo en el desplazamiento hacia arriba.

Funcionamiento

Cree una navegación de cabecera normal como esta:

<header class="header-navigation" id="header">

<nav>


<a class="link" href="#" title="Home">Home</a>


<a class="link" href="#" title="About">About</a>


<a class="link" href="#" title="Contact">Contact</a>

</nav>
</header>

Haga que la navegación del encabezado sea pegajosa en la carga de página.

.header-navigation {

position: fixed;

top: 0;

width: 100%;

height: 60px;

line-height: 60px;

background-color: #333;

text-align: center;

box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

El JavaScript para mostrar/ocultar automáticamente la navegación del encabezado en función de la posición de desplazamiento.

var new_scroll_position = 0;
var last_scroll_position;
var header = document.getElementById("header");

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

last_scroll_position = window.scrollY;


// Scrolling down

if (new_scroll_position < last_scroll_position && last_scroll_position > 80) {


// header.removeClass('slideDown').addClass('slideUp');


header.classList.remove("slideDown");


header.classList.add("slideUp");


// Scrolling up

} else if (new_scroll_position > last_scroll_position) {


// header.removeClass('slideUp').addClass('slideDown');


header.classList.remove("slideUp");


header.classList.add("slideDown");

}


new_scroll_position = last_scroll_position;
});

Aplique animaciones de deslizamiento hacia arriba/abajo suaves a la navegación del encabezado.

.slideUp {

-webkit-transform: translateY(-100px);

transform: translateY(-100px);

transition: transform .5s ease-out;
}

.slideDown {

-webkit-transform: translateY(0);

transform: translateY(0);

transition: transform .5s ease-out;
}