ember-sliding-sticky

ember-sliding-sticky

A drop-in implementation for sticky elements. By default, uses transform: translate3d(0, Npx, 0) to position sticky elements.

Pros

• Very easy to use.
• Works correctly and naturally with sticky elements taller than viewport.
• Works both with window scrolling and custom element scrolling.
• Unlike position: sticky, works fine inside parents that have overflow and/or transform.
• Thanks to not using position: fixed, when your scroll container is shorter than viewport and the sticky element is taller, the sticky element never overflows out of parent.
• Allows for a sliding animation. Just enable throttling and apply transition: transform 0.5s ease to your sticky element.

Cons

• Only one sticky element per column.
• Customizing offset is not supported yet. PRs welcome!
• For the sticky element to appear fixed, throttling must be disabled. This may cause two issues (the effect gets worse on slower systems and when there are many sticky elements on the page):
  • Scrolling may be laggy on slow systems.
  • The sticky element may jitter slightly.
• Only respects one scroll container. If you have a scrolling container inside a scrolling container, you can only tell a sticky element to align according to the inner container's scrolling. But that's a very rare case.
• Relies on jQuery.

Restrictions

Requires a sticky element to be initially located at the top of its immediate parent, so that the whole parent's inner height is available for the sticky element to roam.

One possible way to achieve this is to apply the following CSS to the immediate parent of the sticky element:

display:     flex;
align-items: flex-start;

Demo

https://github.com/Deveo/ember-sliding-sticky/graphs/contributors

Installation

With npm: ember i ember-sticky-container

With Yarn: yarn add -D ember-sticky-container

Quickstart

In a template, replace an HTML element you want to be sticky with the sliding-sticky component.

Before:

<div>My sidebar</div>

After:

{{#sliding-sticky}}
  My sidebar
{{/sliding-sticky}}

Alternatively, you can apply the sliding sticky mixin to your components:

import Component from 'ember-component'
import SlidingStickyMixin from 'ember-sliding-sticky/mixin'

export default Component.extend(SlidingStickyMixin, {
  // ...
})

Animating sticky elements

By applying transition: transform 0.5s ease CSS to your sticky elements, you can make them appear static while you're scrolling, but when you stop scrolling, the elements smoothly slide back into view.

If you go for this effect, it's highly recommended to enable throttling (see below), it will prevent scrolling from appear laggy on slow systems. Throttling is disabled by default because without animation it causes the sticky element to jitter.

Available options

Option	Type	Default value	Description
slidingStickyScrollParent	selector string, DOM element or jQuery collection	window	Which scroll container to use.
slidingStickyThrottleDuration	Number	0	Throttle duration in milliseconds. 0 disables throttling. Set to 100 or so if you're using the transition animation.

Overridable methods

Option	Arguments	Description
slidingStickyApplyPosition	positionPx (number of pixels)	Lets you customize the way the element is positioned. By default, applies transform: translate3d(0, Npx, 0) inline CSS to the element.
slidingStickyTransitionEnd	none	Lets you react when the element finishes positioning. This is only useful when you apply transition: transform to the element.

Credit

Proudly built in @Deveo by @lolmaus and contributors.

https://deveo.com

License

MIT

Changelog

[1.0.0] - 2017.04.20

Initial release.