Navegación de cabecera Sticky inteligente con vainilla JavaScript-reducción de cabecera

Vista prévia

Descripción

Reducción de encabezado es una biblioteca de JavaScript vainilla para crear una navegación de encabezado Sticky que se encogerá automáticamente a medida que se desplaza hacia abajo de la página.

Funcionamiento

Cree una navegación de cabecera para su sitio Web.

<div class="topHeader">

<div id="headerContainer" class="expandMe expanded">


<nav >



<ul class="primaryMenu">




<li><a href="#top" class="selected">Home</a></li>




<li><a class="link" href="#about">About</a></li>




<li><a class="link" href="#geckos">Buy Now</a></li>




<li><a class="link" href="#contact">Contact Us</a></li>



</ul>


</nav>

</div>
</div>

Agregue los estilos CSS necesarios a la navegación del encabezado.

.topHeader {

width: 100%;

z-index: 11;

box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);

height: auto;

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

.expandMe {

transition: all 0.5s ease 0.1s;
}

.expanded {

padding: 50px 0;
}

@media only screen and (min-width: 64.063em) {




.topHeader {


display: block;


position: fixed;


top: 0;


right: 0;


width: 100%;

}



nav ul {


margin-bottom: 0;


margin-left: 1rem;

}




.primaryMenu li {


 display: inline-block;

}


.primaryMenu li a {


 display: block;


 padding: 30px 18px;


 font-size: 1rem;

}

}

Cargue el archivo JavaScript Sticky-header. js en la página web donde sea necesario. Eso es todo.

<script src="js/sticky-header.js"></script>