Plugin ScrollSpy simple con JavaScript puro

Vista prévia

Descripción

Una biblioteca JavaScript sencilla y ligera que aplica la funcionalidad Scrollspy a un sitio web de desplazamiento de una página.

El plugin agrega automáticamente la clase CSS ' Active ' al elemento de navegación cuando la página se desplaza a su sección correspondiente.

Funcionamiento

Instale la biblioteca.

# Yarn
$ yarn add simple-scrollspy

# NPM
$ npm install simple-scrollspy --save

O descargue el zip y luego inserte el archivo JavaScript ' simple-scrollspy. js ' en el documento.

<script src="simple-scrollspy.js"></script>

Cree un menú de navegación normal y especifique las secciones de la página de destino utilizando el atributo ' Data-scrollspy ' de la siguiente manera:

<section class="scrollspy" id="home">

<nav class="navigation">


<ul id="menu" class="menu">



<li class="menu__item">





<a href="#home" class="active" data-scrollspy="#home">Home</a>



</li>



<li class="menu__item">





<a href="#contact" data-scrollspy="#contact">Contact</a>



</li>



<li class="menu__item">





<a href="#about" data-scrollspy="#about">About</a>



</li>


</ul>

</nav>
</section>

<section class="scrollspy" id="contact">

Contact Setion
</section>

<section class="scrollspy" id="about">

About Setion
</section>

Active el plugin scrollspy con opciones predeterminadas.

window.onload = function () {

scrollSpy('#menu')
}

Todas las opciones posibles para personalizar la funcionalidad de scrollspy.

window.onload = function () {

scrollSpy('#menu', {


offset: 0, // in pixels


menuActiveTarget: 'li > a',


sectionClass: '.scrollspy',


activeClass: 'active',

})
}

Personalice los estilos cuando un elemento de menú esté activo.

.menu__item a.active {

color: #ff7600;

font-weight: bolder;
}

Registro de cambios

02/17/2019

• Arreglado: se produce un error cuando no se puede encontrar el elemento de menú

02/16/2019

• Corregir datos-scrollspy problema y refactorizar código