Scrollspy & biblioteca de desplazamiento suave-scrollspy. js

Vista prévia

Descripción

Una biblioteca de scrollspy Pure JavaScript ligero que permite los enlaces de navegación a desplazarse suavemente entre las secciones de la página con soporte scrollspy.

Funcionamiento

Descargue e incluya la biblioteca scrollspy. js en la parte inferior de la Página Web.

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

Crear la navegación y su correspondiente contenido seccionado.

<nav class="navbar">

<ul>


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


<li><a href="#portfolio" title="Portfolio">Portfolio</a></li>


<li><a href="#about" title="About">About</a></li>


<li><a href="#contact" title="Contact">Contact</a></li>

</ul>
</nav>

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

<div class="container">


<h2>Home</h2>

</div>
</section>

<section id="portfolio" class="page">

<div class="container">


<h2>Portfolio</h2>

</div>
</section>

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

<div class="container">


<h2>About</h2>

</div>
</section>

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

<div class="container">


<h2>Contact</h2>

</div>
</section>

Inicializar la biblioteca de scrollspy. Eso es todo.

var menu = document.querySelector('.navbar');
scrollSpy(menu);

Estilo del elemento de menú activo en el CSS:

.navbar a.active {

color: #fff;

line-height: 50px;

text-decoration: none;
}

Override the default scroll speed.

scrollSpy(menu,2000);

Aplique un efecto de aceleración al desplazamiento suave.

// 'easeOutSine', 'easeInOutSine' or 'easeInOutQuint', default value easeInOutQuint
scrollSpy(menu, 2000, 'easeInOutQuint');

Registro de cambios

05/26/2018

• v2.0.2