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.
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 can't fit on-screen inside the sticky element.
$('.ui.sticky')
.sticky({
context: '#example3'
})
;
Long Stuck Content
Short Stuck Content
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.
$('.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 |
| setSize | true New in 2.2.11 |
Sets size of fixed content to match its width before fixing to screen dynamically. This is used because fixed may display block or 100% width content differently than it appears before sticking. |
| 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.'
}
|
|