Menu

Sticky
Sticky content fixes itself to the browser viewport as content is scrolled

Download

Introduction

Sticky content stays fixed to the browser viewport while another column of content is visible on the page.

Although sticky content can be used inside any container, sticky pairs well with ui rail because often "stuck" content is used to occupy additional canvas space outside of the main content of a website, making sure follow up links, ads, and other ancillary content remains on screen while engaging the sites main content.

The following examples may be hidden on small screen sizes. For the best experience, view these examples on a large resolution display.

Examples

Sticking to Adjacent Context

Sticky content attaches itself to the viewport when it is passed, and remains fixed to the viewport until this fixed content collides with the bottom edge of the passed context. Additional static content can exist above sticky content without affecting its position.

$('.ui.sticky') .sticky({ context: '#example1' }) ;

Stuck Content

Stuck Content

Pushing

Specifying pushing: true will have the viewport "push" the sticky content depending on the scroll direction. When scrolling down content will be stuck to the top of the viewport, but in the opposite direction content is stuck to the bottom of the viewport.

$('.ui.sticky') .sticky({ context: '#example2', pushing: true }) ;

Stuck Content

Stuck Content

Oversized Content

Sticky content that is larger than the viewport will automatically scroll independently from the context, shifting scroll direction at any time will also immediately adjust the scroll position of the fixed content.

This behavior makes sure users aren't required to navigate all the way to the top of the context element to see content that cant fit on-screen inside the sticky element.

$('.ui.sticky') .sticky({ context: '#example3' }) ;

Sticking to Own Context

Sticky content without a specified context can also stick itself to its current context, although this may cause overlap issues with content.

Content that sticks to its own context will adjust its own layout when being "stuck". You can fix layout issues caused by this reflow by adding styles to the next element after a ui fixed sticky

.ui.fixed.sticky + p { margin-top: 39px; }
$('.ui.sticky') .sticky() ;

Usage

Initializing

Sticky is initialized on content that should be stuck to viewport. Most instances require specifying a secondary context which will define the top and bottom bounds of the sticky element. Sticky content must be included inside a containing element. This container can be a ui rail or your own arbitrary container, but should exist parallel to your context.

Sticky does not work in tables without using table-layout: fixed to prevent automatic resizing with content
$('.ui.sticky') .sticky({ context: '#context' }) ;

Refreshing Cached Values

Sticky content caches its current offset on the page and other crucial values on initialization. This prevents it from having to query the DOM on each browser scroll which would drastically reduce performance.

Sticky uses mutation observers to adjust its position when content is added to the context, and also will automatically recalculate on browser resize, but any other changes to your page that adjust the elements context require you to refresh the sticky's position

Examples of changes that might affect sticky elements are:

Loading images without specified size
Setting CSS which adjusts the layout of the page
Hiding elements using Javascript

Refreshing cached values just requires calling the refresh behavior.

// recalculates offsets $('.ui.sticky') .sticky('refresh') ;

Sticky Conditions

Sticky content is required to be inside its own position: relative container that is either the sticky context, or shares vertical positioning with the context element.

You can use ui rail or ui grid column that are in the same row to provide this set-up, or your own custom CSS

Sticky elements swap between being bound to the edges of their container, or fixed to the edges of the browser viewport

Class Description
Fixed Top ui fixed top sticky Element is fixed to top of viewport
Fixed Bottom ui fixed bottom sticky Element is fixed to bottom of viewport
Bound Top ui bound top sticky Element is bound to the top of its containing element (usually rail or column)
Bound Bottom ui bound bottom sticky Element is bound to the bottom of its containing element (usually rail or column)

Adjusting Offset and Padding

If you have content fixed to the viewport it might make sense to include a top or bottom offset. An offset will adjust all values so that content does not overlap any content between the top of the browser and the specified value. A bottomOffset will do the same thing for content fixed to the bottom of the viewport.

$('.ui.sticky') .sticky({ offset : 50, bottomOffset : 50, context : '#element-to-follow' }) ;

Sticky Settings
Settings to configure sticky behavior

Setting Default Description
pushing false Whether element should be "pushed" by the viewport, attaching to the bottom of the screen when scrolling up
jitter 5 Sticky container height will only be set if the difference between heights of container and context is larger than this jitter value.
observeChanges false Whether any change in context DOM should automatically refresh cached sticky positions
context false Context which sticky element should stick to
scrollContext window Context which sticky should attach onscroll events.
offset 0 Offset in pixels from the top of the screen when fixing element to viewport
bottomOffset 0 Offset in pixels from the bottom of the screen when fixing element to viewport

Callbacks

Callbacks specify a function to occur after a specific behavior.

Context Description
onReposition $module Callback when element is repositioned from layout change
onScroll $module Callback when requestAnimationFrame fires from scroll handler.
onStick $module Callback when element is fixed to page
onUnstick $module Callback when element is unfixed from page
onTop $module Callback when element is bound to top of parent container
onBottom $module Callback when element is bound to bottom of parent container

DOM Settings
DOM settings specify how this module should interface with the DOM

Setting Default Description
namespace sticky Event namespace. Makes sure module teardown does not effect other events attached to an element.
className
className : { bound : 'bound', fixed : 'fixed', supported : 'native', top : 'top', bottom : 'bottom' }
Class names used to attach style to state

Debug Settings
Debug settings controls debug output to the console

Setting Default Description
name Sticky Name used in debug logs
silent False Silences all console output including error messages, regardless of other debug settings.
debug False Provides standard debug output to console
performance True Provides standard debug output to console
verbose True Provides ancillary debug output to console
errors
error : { container : 'Sticky element must be inside a relative container', visible : 'Element is hidden, you must call refresh after element becomes visible', method : 'The method you called is not defined.', invalidContext : 'Context specified does not exist', elementSize : 'Sticky element is larger than its container, cannot create sticky.' }

Dimmer Message
Dimmer sub-header