active-scroll-navigation
Navigation will change active state when user scroll.
Last updated 2 years ago by cagosto .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install active-scroll-navigation 
SYNC missed versions from official npm registry.

Scrolling Active Navigation

Whats This

This is a plain JavaScript Class that changes the active navigation item while the user scroll up/down the page. It has options for active class name and scroll offset. You can also turn the event listener for window scroll on and off if need along with retrieving the active item index.

Demo Link

https://codepen.io/Cagosto/pen/opwJoK

Installation

Get if from npm

npm i active-scroll-navigation

import it in your app

import ACTIVE_SCROLL from 'active-scroll-navigation'

How to use

new ACTIVE_SCROLL({
  nav: '.main-nav'
  offSet: 0,
  activeString: 'main-nav__item—active'
});

Settings

Name Type Required Value
nav String True ""
offSet Num False 0
activeString String True main-nav__item--active

Get Active Index

const activeScroll = new ACTIVE_SCROLL();
let index = activeScroll.activeItem();

Events

const activeScroll = new ACTIVE_SCROLL();

activeScroll.eventsSrollOff() //Stop Scroll Listener

activeScroll.eventsSroll() //Start Scroll Listener

Current Tags

  • 1.0.16                                ...           latest (2 years ago)

17 Versions

  • 1.0.16                                ...           2 years ago
  • 1.0.15                                ...           2 years ago
  • 1.0.14                                ...           2 years ago
  • 1.0.13                                ...           2 years ago
  • 1.0.12                                ...           2 years ago
  • 1.0.11                                ...           2 years ago
  • 1.0.10                                ...           2 years ago
  • 1.0.9                                ...           2 years ago
  • 1.0.8                                ...           2 years ago
  • 1.0.7                                ...           2 years ago
  • 1.0.6                                ...           2 years ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 3
This Month 13
Last Day 2
Last Week 1
Last Month 20
Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |