Skip to content

Latest commit

 

History

History
49 lines (39 loc) · 2.62 KB

README.md

File metadata and controls

49 lines (39 loc) · 2.62 KB
Raw

scrollSpy

A simple scroll spy

Building the Project

  • Dependencies: node, (ruby) sass*, gulp
  • To start run npm install, git submodule init and git submodule update.
  • gulp will build the site
  • gulp watch will set-up watch, watchify, browser-sync
  • gulp prod will build the site with minified/uglified/optimized assets

*Sass is only there to build the demo page. You can remove it all if you like.

Example

// require('./matchMedia'); // only necessary if using a media query in options & want deeper support

scrollSpy({
	nav: '#pageNav',
	stickyNav: true
});

Settings

Options Type Default Description
nav string or jQuery obj null Selector for your entire nav container, probably a <nav> or <ul>
navLinks string '[href^="#"]' The links that will be controlling this thing
stickyClass string 'is-sticky' Class that's applied to your nav when it's off the page. You probably want to set position: fixed; at this point.
scrollDuration number 500 How long do you want the animated scrolls to take
activeClass string is-active Class that's applied to the nav item that's the current position on the page.
stickyNav boolean false Do you want me to toggle the stickyClass when the nav is on/off the page
title string or jQuery obj null Do you need to update something to the title of the link when it's the current position?
disableScrollToAnchor boolean or string false True will disable animated scrolls between anchors. A media query will disable it accordingly (Ex. (min-width: 768px)). Remember to use a matchMedia polyfill if you need that support.
disableScrollSpy boolean or string false True will basically disable the whole point of this thing. The string is a media query, refer to above.
classOnTarget boolean false Adds active class to current active target (not the anchor)

Callbacks

Name Params Description
onScrollCb scrollPosition: num, navHeight: num Fired on scroll. Not debounced or throttled. Will not be disabled by disableScrollSpy option.
onChangeCb lastId: string, id: string, scroll: num, navHeight: num Fired when current section changes. LastId is the previous one. id is the new one.
onClickCb el: jquery obj of item clicked, disabled: whether or not disableScrollToAnchor is on Fired when nav item is clicked

Known Issues

Your last item needs to be tall enough to ensure that it triggers the scroll spy. It can probably be a touch more intelligent about how it works but consider adjusting your design to better suit this.