---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.

<badge>[[beta|beta]]</badge>

  * 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.
<code dw>
<tag sticky="true"></tag>
</code>

==== 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 =====


<webcode name="Default" frameborder="0" >
<code dw>
<row align="center" width="600px" text-align="center">
  <cell>
      <note>😎</note>
      <note>😎</note>
      <note>😎</note>
  </cell>
  <cell>
      <note>😎</note>
      <note>😎</note>
      <note>😎</note>
  </cell>
  <cell>
      <note>😎</note>
      <note>😎</note>
      <note>😎</note>
  </cell>
</row>
</code>
</webcode>

===== Documentation / Reference =====
    * Sticky sidebar:
      * until the bottom (https://sticksy.js.org/)
      * https://rgalus.github.io/sticky-js/