https://github.com/nicolasjengler/youarehere.js
A lightweight, vanilla JS, scroll position indicator.
https://github.com/nicolasjengler/youarehere.js
Last synced: 21 days ago
JSON representation
A lightweight, vanilla JS, scroll position indicator.
- Host: GitHub
- URL: https://github.com/nicolasjengler/youarehere.js
- Owner: NicolasJEngler
- License: cc0-1.0
- Created: 2015-10-04T23:45:25.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-10-06T03:59:19.000Z (over 9 years ago)
- Last Synced: 2023-12-18T03:21:16.735Z (over 1 year ago)
- Language: HTML
- Size: 160 KB
- Stars: 12
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# youAreHere.js
A lightweight, vanilla JS, scroll position indicator.
#### Check this plugin in action right here: http://nicolasjengler.github.io/youAreHere.js/demo/
**youAreHere.js** is a lightweight, dependency-free, vanilla JS plugin to indicate the user's current scroll position on a website. It is currently in alpha state, and it should be used with that in mind.
### Usage
The only thing you should do is place the JS file and link it in your document like this:
```html
```
Some of the scrollbar properties can be set through a function like this:
```javascript
youAreHere({
height: '5px', // Accepts values in px, %, and rem (if the root font-size has been properly set)
color: '#2e2e2e', // Accepts HEX, RGB and RGBA values
easing: true // If true a cubic-bezier easeInOutQuart value is set with a 3ms duration
});
```
| Property | Value |
|----------|----------------------------------|
| height | _(string)_ 3px by _default_ |
| color | _(string)_ #472836 by _default_ |
| easing | _(boolean)_ false by _default_ |
---
Please keep in mind that this is my first JS-only plugin, so there's going to be a ton of things to improve. Of course pull requests and feedback are both welcome!