Highlight Active Menu Based On The Scroll Position – active-menu-link

Category: Javascript , Menu & Navigation | May 31, 2019
Author: Kosalexei
Views Total: 276
Official Page: Go to website
Last Update: May 31, 2019
License: MIT

Preview:

Highlight Active Menu Based On The Scroll Position – active-menu-link

Description:

active-menu-link is a pure JavaScript smooth scroll & scrollspy library which highlights the active menu item based on the scroll position.

A typical use of this library is to create a sticky header navigation for your single page app that allows the user to smoothly scroll through page sections while highlighting the active menu item.

How to use it:

Install & download.

# Yarn
$ yarn add active-menu-link

# NPM
$ npm install active-menu-link --save

Import the package as a module.

import ActiveMenuLink from "active-menu-link";

Or directly load the UMD version in the document.

<script src="active-menu-link.js"></script>

Create the navigation and page sections on the page.

<nav class="navbar">
  <ul class="navbar-items">
    <li><a href="#first">First</a></li>
    <li><a href="#second">Second</a></li>
    <li><a href="#third">Third</a></li>
    ...
  </ul>
</nav>

<div class="blocks">
  <div class="block" id="first">First Section</div>
  <div class="block" id="second">Second Section</div>
  <div class="block" id="third">Third Section</div>
  ...
</div>

Initialize the active-menu-link.

new ActiveMenuLink(".navbar");

Apply your own styles to the active menu item.

.active {
  /* styles here */
}

Available options.

new ActiveMenuLink(".navbar",{

    // selector of menu item
    itemTag: "li",

    // active class
    activeClass: "active",

    // in pixels
    scrollOffset: 0,

    // duration in ms
    scrollDuration: 500,

    // easing function
    ease: "out-circ",

    // specifies the header height
    headerHeight: null,

    // string
    default: null,

    // shows hash tag
    showHash: true
    
});

You Might Be Interested In:


Leave a Reply