Sticky is a positioning option 1) 2) that:
From a logical point of view, the element is treated:
The pinning (sticking) of an element is enabled through:
In Css, Sticky positioning:
In Css, Sticky positioning
Offsets are defined in reference to the nearest scrollport:
Example: Just scroll the below example, the explanation comes later. This example shows:
<div class="document" style="height:300px;">
<div class="header" style="height:100px;border: 1px solid blue">
Header
</div>
<div class="sticky-box" style="height:100px;top:50px;position:sticky;border: 1px solid red; overflow-y: auto">
<p>Sticky box</p>
<p>Sticky box</p>
<p>Sticky box</p>
<p>Sticky box Overflow</p>
<p>Sticky box Overflow</p>
<p>Sticky box Overflow</p>
</div>
</div>
In the above example:
The Bootstrap Affix implements sticky positioning via class toggling that represents a particular state.
When the element scrolling past the offset limit provided by the “data-offset-” attribute the plugin replaces: