@autots/sticky

sticky

a sticky lib to simulate stickily positioned element.

Features

• typescript features & vanilla js
• use CSS sticky firstly
• support ie9+
• only support sticky top

Installing

Using npm:

$ npm install @autots/sticky -S

Using yarn:

$ yarn add @autots/sticky

Example

layouts

<section id="demo">
  <div class="child"></div>
</section>

Note: When the host browser doesn't support css position: sticky, the lib will fall back to use scroll event on window object, and set some css properties to his fisrtElementChild.

import as a module

import Sticky from '@autots/sticky';

// 1. The simplest way
new Sticky('#demo');

// 2. use config
new Sticky('#demo', {
  top: 10,
  zIndex: 100
})

import as a lib

<script src="dist/sticky.min.js"></script>

<script>
  var stickyDemo = new AutoTs.Sticky(el, config);
</script>

Config

Name	Type	Default	Optional	Description
mode	'sticky' or 'affix'	'sticky'	true	normal affix（fixed） mode or new sticky feature ｜
scrollRefer	string | HTMLElement | Document | Window	window	true	scroll container
offsetParent	string	null	true	offset parent el ｜
top	number	0	true	CSS top (px) property
style	object	{}	true	CSS property
holderStyle	object	{}	true	CSS property for the Target Placeholder Element
throttle	boolean	false	true	throttle feature when use scroll event(assigned when encounter special cases)

scrollRefer & offsetParent must have a non-static position.

Todo

• support config direction