Resalte elemento de menú activo en el desplazamiento de página-MenuSpy. js

Vista prévia

Descripción

MenuSpy. js es una biblioteca de JavaScript multipropósito para su sitio web de desplazamiento de una página que resalta el elemento de menú en relación con la sección actualmente visible.

El objetivo de esta biblioteca es detectar la posición de desplazamiento y agregar una determinada clase CSS a los elementos de menú activos cuando se desplaza más allá de sus secciones.

Instalación

# Yarn
$ yarn add menuspy

# NPM
$ npm install menuspy --save

Funcionamiento

Descargue e inserte el archivo principal de JavaScript MenuSpy. js en la Página Web.

<script src="dist/menuspy.js"></script>

Suponiendo que tiene un menú de navegación que contiene enlaces de anclaje apuntando a las diferentes secciones dentro del documento:

<header id="main-header" class="side-menu">

<nav>


<ul>



<li class="active"><a href="#home"><span>Home</span></a></li>



<li><a href="#section-1"><span>Section 1</span></a></li>



<li><a href="#section-2"><span>Section 2</span></a></li>



<li><a href="#section-3"><span>Section 3</span></a></li>


</ul>

</nav>
</header>

<main>

<section id="home">


<div class="inner">



<h1>Home</h1>


</div>

</section>


<section id="section-1">


<div class="inner">



<h2>Section 1</h2>


</div>

</section>


<section id="section-2">


<div class="inner">



<h2>Section 2</h2>


</div>

</section>


<section id="section-3">


<div class="inner">



<h2>Section 3</h2>


</div>

</section>
</main>

Active la funcionalidad de scrollspy en la navegación.

var elm = document.querySelector('#main-header');
var ms = new MenuSpy(elm);

Opciones predeterminadas.

var ms = new MenuSpy(elm,{



// menu selector


menuItemSelector: 'a[href^="#"]',



// CSS class for active item


activeClass
 : 'active',



// amount of space between your menu and the next section to be activated.


threshold

 : 15,



// enable or disable browser's hash location change.


enableLocationHash: true,



// timeout to apply browser's hash location.


hashTimeout
 : 600,



// called every time a new menu item activates.


callback


: null



});

Registro de cambios

09/13/2018

• v1.3.0