---json
{
"description": "Sticky is an attribute that lets your component stick at the same position when scrolling down",
"page_id": "h7iwuva5fd94ms5n5yao9",
"title": "Sticky: Stick component at the top of your side bar"
}
---
====== ComboStrap Styling - Sticky ======
===== About =====
''sticky'' is a property of a [[docs:block:block|block component]] that will stick their position to the [[#page top|top of your page]].
This component are generally in aside [[docs:theme:slot:slot|bar]] such as the [[docs:theme:slot:side_slot|sidebar]] or [[release:deprecated:sidekick_slot|sidekickbar]].
Sticky blocks are perceived much better by visitors than unfixed widgets and therefore they have a significantly higher click-through rate.
[[beta|beta]]
* New: [[docs:utility:webcode|webcode]] outputs iframe for page syntax in order to demonstrate the [[release:beta:sticky|sticky attribute]]
===== Syntax =====
Adding the ''sticky'' attribute will made them sticky.
==== Page top ====
If you have a [[docs:menubar:fixed-top|fixed top navbar]], this is the [[docs:menubar:fixed-top#set_the_height_of_the_navbar|height of your navbar]], otherwise this is the top of the window.
===== Example =====
😎
😎
😎
|
😎
😎
😎
|
😎
😎
😎
|
===== Documentation / Reference =====
* Sticky sidebar:
* until the bottom (https://sticksy.js.org/)
* https://rgalus.github.io/sticky-js/