Small scrollspy script en Vanilla JavaScript-detective

Vista prévia

Descripción

detective es un ligero (3Kb minificado) JavaScript biblioteca scrollspy que resalta automáticamente los enlaces de navegación para indicar la sección actualmente activa en la ventanilla.

Funcionamiento

Instale & importar la zapata de goma.

# NPM
$ npm install gumshoejs --save

Cargue la biblioteca de detective desde una CDN.

<!-- With polyfills -->
<script src="/path/to/dist/gumshoe.polyfills.min.js"></script>

<!-- Without polyfills -->
<script src="/path/to/dist/gumshoe.polyfills.min.js"></script>

Coloque la zapata de goma en sus enlaces de navegación.

<ul id="site-nav">

<li><a href="#1">Section 1</a></li>

<li><a href="#2">Section 2</a></li>

<li><a href="#3">Section 3</a></li>
</ul>

<section id="1">

Section 1
</section>

<section id="2">

Section 2
</section>

<section id="3">

Section 3
</section>

const instance = new Gumshoe('#side-nav a');

Aplica tus propios estilos a los enlaces activos.

#site-nav a.active {

/* styles here */
}

La biblioteca también admite vínculos de navegación anidados.

const instance = new Gumshoe('#side-nav a',{



nested: true,



nestedClass: 'active'
});

Establecer la distancia desde la parte superior de la biblioteca resalta los enlaces de navegación activos.

const instance = new Gumshoe('#side-nav a',{



offset: 0
});

Más opciones de configuración.

const instance = new Gumshoe('#side-nav a',{




// Active classes



navClass: 'active',



 contentClass: 'active',




// If true, listen for reflows



reflow: false,




 // Event support



events: true

});

Event handlers.

document.addEventListener('gumshoeActivate', function (event) {


// event.target;


// event.detail.link;


// event.detail.content;

}, false);

document.addEventListener('gumshoeDeactivate', function (event) {


// event.target;


// event.detail.link;


// event.detail.content;

}, false);