https://github.com/appleple/pretty-scroll
A modern JS library to make an element follow you as you scroll
https://github.com/appleple/pretty-scroll
Last synced: over 1 year ago
JSON representation
A modern JS library to make an element follow you as you scroll
- Host: GitHub
- URL: https://github.com/appleple/pretty-scroll
- Owner: appleple
- License: mit
- Created: 2017-12-15T08:57:48.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2025-02-27T10:27:15.000Z (over 1 year ago)
- Last Synced: 2025-03-29T11:03:23.364Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://appleple.github.io/pretty-scroll/
- Size: 403 KB
- Stars: 146
- Watchers: 6
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Pretty Scroll
A library to make an element follow you as you scroll
## Demos
- [https://codepen.io/appleple/pen/LeZWjm](https://codepen.io/appleple/pen/LeZWjm)
- [https://codepen.io/appleple/pen/jYrBKr](https://codepen.io/appleple/pen/jYrBKr)
## Installation
- [npm](https://www.npmjs.com/package/pretty-scroll)
- [standalone](https://raw.githubusercontent.com/appleple/pretty-scroll/master/js/pretty-scroll.js)
via npm
```shell
npm install pretty-scroll --save
```
or yarn
```shell
yarn add pretty-scroll
```
### Basic
```html
```
```js
new PrettyScroll('.js-sidebar', {
container: '.js-container',
breakpoint: 575, // stop running the js when the window size is smaller than 575px
offsetTop: 20, // space between the sticky element and the top of the window
offsetBottom: 20, // space between the sticky element and the bottom of the window
condition: () => true // you can disable the sticky behavior by returning false, it will be executed when you scroll.
});
```