https://github.com/diverent2/fixedScrollNav

ES6 module that provides a fixed scrolling navigation to navigate between sections using arrows
https://github.com/diverent2/fixedScrollNav

Last synced: about 2 months ago
JSON representation

ES6 module that provides a fixed scrolling navigation to navigate between sections using arrows

• Host: GitHub
• URL: https://github.com/diverent2/fixedScrollNav
• Owner: diverent2
• License: mit
• Created: 2018-10-01T07:57:49.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T22:37:20.000Z (almost 2 years ago)
• Last Synced: 2024-07-18T12:10:35.531Z (2 months ago)
• Language: JavaScript
• Homepage: https://diverent2.github.io/fixedScrollNav/
• Size: 3.58 MB
• Stars: 2
• Watchers: 0
• Forks: 0
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ↕️ fixedScrollNav

[![npm version](https://badge.fury.io/js/fixedscrollnav.svg)](https://badge.fury.io/js/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](https://diverent2.github.io/fixedScrollNav/) ⬅️

![Demovideo](https://imgur.com/32LQQr4.gif)

## ✨ 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.

```html

  [...]

  [...]

```

AND

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

```html



  


  




```


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](https://babeljs.io/docs/en/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

```css

//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](https://github.com/diverent2/SimplePlate)




made with ♥️ by [diverent2](https://twitter.com/diverent2)