Skip to content

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

Notifications You must be signed in to change notification settings

mnr73/js-sticky-side

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 

Repository files navigation

js sticky side

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

sticky side with javascript

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

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

window.addEventListener("scroll", stFunction);

function stFunction() {
  stickySide.sticky();
}

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published