This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

↕️ fixedScrollNav

ES6 fixed scroll navigation that allows users to navigate between sections with simple and intuitive arrow buttons. Oh and it will work in all browsers 😉💻 (Chrome, Safari, Edge, Firefox and IE11*)

➡️ Demo ⬅️

✨ Feature List

• Vanilla ES6 🍦
• simple and intuitive usage
• flexible (can be used everywhere)
• supports nested containers
• smooth scrolling automatically gets polyfilled only if needed
• lightweight: ~3kb (minified version + 4kb polyfill if needed)
• can be controlled via keyboard (A11y ready)

🏗️ Setup

Manager	Command
yarn (recommended)	yarn add fixedscrollnav
npm	npm install fixedscrollnav

👩‍💻 usage

HTML / Markup

use data-fixedScrollNav-section (this marks the beginning of a section) to indicate which sections to scroll to.

<section data-fixedScrollNav-section>
 [...]
</section>
<section data-fixedScrollNav-section>
 [...]
</section>

AND

add the basic navigation markup to html body (best at top/end)

<div class="fixedScrollNav__container">
 <div class="fixedScrollNav__button fixedScrollNav__button--previous" title="go to previous section"></div>
 <div class="fixedScrollNav__button fixedScrollNav__button--next" title="go to next section"></div>
</div>

Use title to adjust the text that is displayed on hover

JS (ES6 Module)

Import*

import fixedScrollNav from '~fixedScrollNav';

or minified

import fixedScrollNav from '~fixedScrollNav.min';

Initialize

new fixedScrollNav();

(This will first test if the markup for the navigation even exist. If not, it won´t initialize.)

*Note: for IE11 support you will also need to use babel-polyfill.

Available Functions/Vars

give your fixedScrollNav a name like

const awesomeNav = new fixedScrollNav();

to use these features.

name	function
currentSection_index	returns an index number (starting with 0) of the currently active section
---	---
scrollToPreviousSection()	if available scrolls to previous (above) section
scrollToNextSection()	if available scrolls to next (below) section

functions starting with an underscore (_) are meant to be private.(not be called)

You can find a listing of all functions inside DiverentTools:

in your console window.DiverentTools.fixedScrollNav

Styles

Import

@import '~/fixedScrollNav/lib/css/fixedScrollNav';
or
@import '~fixedScrollNav/lib/css/fixedScrollNav.min';

Classes

used classes (default) feel free to adjust to your needs

//container with buttons
//declares the fixed position
.fixedScrollNav__container 
 
 //button classes
 .fixedScrollNav__button
 
   //arrow up
   .fixedScrollNav__button--previous
   //arrow down
   .fixedScrollNav__button--next

Module Development (Contribution)

clone this repository git clone https://github.com/diverent2/fixedScrollNav.git

cd ./fixedScrollNav

install modules

Manager	Command
yarn	yarn
npm	npm install

start

change source files, adjust the demo and module behavior.

Manager	Command
yarn	yarn start
npm	npm start

build

Manager	demo (./docs)	module (./lib)
yarn	yarn build-demo	yarn build-module
npm	npm run build-demo	npm run build-module

for further reference see ⛳SimplePlate

made with ♥️ by diverent2