https://github.com/mnr73/js-sticky-side

create sticky element in flexbox sidebars. it can use in Vanilla JS and frameworks like Vue and React
https://github.com/mnr73/js-sticky-side

Last synced: about 1 month ago
JSON representation

create sticky element in flexbox sidebars. it can use in Vanilla JS and frameworks like Vue and React

• Host: GitHub
• URL: https://github.com/mnr73/js-sticky-side
• Owner: mnr73
• Created: 2022-02-08T20:14:30.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2022-02-08T20:17:20.000Z (almost 3 years ago)
• Last Synced: 2024-10-28T15:54:54.823Z (about 2 months ago)
• Language: JavaScript
• Homepage:
• Size: 5.42 MB
• Stars: 10
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# js sticky side

simple sticky side with js that can use in frameworks like vue and react.

![sticky side with javascript](/files/preview.GIF "js sticky side")

## notes

- it can be used just in flexbox grids.

- target element should be parent flexbox and it should have just one child.

- the child should not have bottom margin.

## how to use

install it with this command.

`npm i js-sticky-side`

import that in your code.

`import { sticky } from "js-sticky-side"`

create object and use it

`var stickySide = new sticky(parentElement, int topOffest, int bottomOffset, int screenWith);`

- **parentElement** : the parent element that should be flexbox

- **topOffest** : sticky child space to top (default 0)

- **bottomOffset** : sticky child space to bottom (default 0)

- **screenWith** : minimum screen size that sticky should be active (default 0)

## example

```js

var stickySide = new sticky(document.querySelector("#sticky-parent"), 80, 20, 768);

window.addEventListener("scroll", stFunction);

function stFunction() {

  stickySide.sticky();

}

```