Generador de navegación de una sola página versátil-scrollNav. js

Vista prévia

Descripción

scrollNav. js es una biblioteca de JavaScript que se usa para generar automáticamente una lista de navegación a partir de elementos de encabezado (o cualquier otro elemento de cabecera) para que los usuarios puedan navegar rápidamente entre las secciones de la página dentro de la aplicación web larga.

También proporciona una funcionalidad de Scrollspy que resalta automáticamente el elemento de lista activa cuando los usuarios alcanzan la sección de página correspondiente en el desplazamiento de página.

Ideal para la navegación de desplazamiento de una página y la tabla de contenido (TOC).

Funcionamiento

Instalación & Descargar:

# NPM
$ npm install scrollnav --save

Importe el scrollNav. js en el documento.

<script src="/dist/scrollnav.min.umd.js"></script>

Crear secciones de contenido en la página.

<div class="mainContent">

<h2>Section 1</h2>

...

<h2>Section 2</h2>

...

<h2>Section 3</h2>

...

<h2>Section 4</h2>

...

<h2>Section 5</h2>

...
</div>

Inicializar la biblioteca en el contenedor superior.

const content = document.querySelector('.mainContent');
scrollnav.init(content);

Aplique sus propios estilos a la lista de navegación.

.scroll-nav__list {

margin: 0 auto;

padding: 0;

list-style-type: none;
}

.scroll-nav__list:after {

content: "";

display: table;

clear: both;
}

.scroll-nav__item {

margin-bottom: 5px;

float: left;

margin-right: 15px;

border-bottom: 1px solid transparent;
}

.scroll-nav__item--active {

font-weight: 600;

border-bottom-color: white;
}

.scroll-nav__link {

color: white;

text-decoration: none;
}

Opciones y valores predeterminados.

scrollnav.init(content,{


// heading element

sections: 'h2',


// where to insert the navigation list

insertTarget: elem,


// or 'after'

insertLocation: 'before',


// easing

easingStyle: 'easeOutQuad',


// sets the history behavior when a nav item is clicked

updateHistory: true


});

Actualice la posición de desplazamiento actual.

scrollnav.updatePositions();

Destruye la biblioteca.

scrollnav.destroy();