Plugin de navegación en la página de JavaScript Sticky-Navigator. js

Vista prévia

Descripción

Navigator. js es un plugin de JavaScript scrollspy utilizado para crear una navegación de página adhesiva que resalta el elemento de menú actual cuando se desplaza más allá de su sección de contenido.

Funcionamiento

Incluya la biblioteca JavaScript Navigator. bundle. js en la parte inferior de la Página Web.

<script src="Navigator.bundle.js"></script>

Se supone que tiene varias secciones de contenido en la Página Web de la siguiente manera:

<h2 id="introduction" class="page-link">Introduction</h2>
...
<h2 id="Installation" class="page-link">Installation</h2>
...
<h2 id="example" class="page-link">Example</h2>
...

Cree la navegación en la página:

<div class="links">

<ul>


<li class="list__item"><a class="stickyLink" href="#introduction">Introduction</a></li>


<li class="list__item"><a class="stickyLink" href="#Installation">Installation</a></li>


<li class="list__item"><a class="stickyLink" href="#example">Example</a></li>

</ul>
</div>

Inicializar el plugin y listo.

var exampleNav = new Navigator({


activeClass: 'active',


activeElement: '.list__item',


defaultIndex: 1,


offset: 0,


pageLinkSelector: '.page-link',


throttle: 75,


updateState: true,


debug: true
});

Opciones de configuración predeterminadas.

// Class name applied to the current active element.
activeClass: 'active',

// Any valid HTML Selector, .foo, #bar, *[data-active].
 // The active element by default will be anchor link with corrorsponding href attribute, if activeClass is set to false.
activeElement: false,

// The default active item, this is not zero indexed (defaultIndex: 1 = first item)
// If set to false, first active item will activate once scrolled into view.
defaultIndex: 1,

// Active item offset, this is the amount in pixels an item will activate before it reaches the top of the viewport. Margin & padding are currently included by default.
offset: 0,

// Page link selector, this accepts any valid HTML selector to identify which links should be considered part of the Navigator menu.
pageLinkSelector: '.page-link',

debounce: 100,

// Amount in milliseconds the window scroll event is throttled.
 // The default will update the Navigator's state every 75ms consecutive scroll events are fired.
 // Increasing this amount will improve performance but affect Navigator's accuracy responding to scroll events.
throttle: 75,
useHistory: true,
debug: false,

// Fired once the active item has changed, the active item HTMLElement is available as an argument.
callbacks: {

onActiveItem: null
}