Sticky Utilities
A "Sticky" element is one that has its position fixed to a certain side of your container or viewport. The Control Panel Pattern Lab exposes a few utilities to help you achieve this in a standard way with your component.
The Sticky Mixin
By default, the sticky() mixin will position your element to the top of the container,
and stretch it to the left and right of the container. Caveat emptor, this may mess with the layout of your component, depending on its contents.
The sticky mixin will generate the following CSS to reposition your element.
The following options are available for the mixin. The appropriate values get set depending on what position you pass to the mixin. E.g. if you're positioning an element to the right of the screen, the left value will not be set.
The Sticky State Class
The .is-sticky state class assumes that your component is stuck to the top of the container, and is acting as a sticky header. It is intended to be coupled with the Sticky directive, which is outlined further down the page.
Note: The .is-sticky state does not have to be the class you use as your sticky class. It is only a helper. You may use the mixin and create a variation that suits you.
The z-index value resolves to 100, which is in front of all content but behind modal overlays.
The Sticky Class Directive
A simple angular directive used to trigger a class on your component when the element that uses the directive scrolls past the top of the viewport.