Sticky is a element that transforms in to a fixed position container. Stickies are useful for attracting users attention or to trigger hidden menus. You can also use data-sticky-menu to convert the sticky in to a smooth scroll menu.
options:
| Options |
Description |
class="yjsg-sticky" |
*Required option. Sticky trigger class name. |
data-hide |
*Required option. This option defines if the sticky should be hidden until scrolled in to view or if it should stay visible. |
data-pushed |
*Required option. You can use this option to push sticky down. Set to 0 not to push the sticky. |
data-offset |
*Required option. This is a top position offset where the sticky should become visible. |
data-effect |
*Required option. Sticky has 2 transition options. You can use slide or fade. |
class="yjsgsitew" |
This is optional helper class that can be used inside the sticky contaner. This class holds the site width thus aligns the sticky in the middle. |
class="inside-container" |
This is optional helper class that can be used inside the sticky contaner. This class lines up the grid system paddings. |
data-sticky-menu |
Converts the sticky container in to a smooth scroll sticky menu. Requires specific setup. See markup. |
data-sticky-block |
Converts sticky menu in to a right aligned sticky menu block. Requires specific setup. See markup. |
example:
I will become a sticky once you scroll 500px down.
markup:
<div class="yjsg-sticky" data-hide="no" data-pushed="0" data-offset="500" data-effect="slide">
<div class="yjsgsitew"> I will become a sticky once you scroll 500px down.</div>
</div>
<div class="yjsg-sticky" data-hide="yes" data-pushed="120" data-offset="400" data-effect="fade" data-sticky-menu>
<div class="yjsgsitew inside-container">
<ul class="yjsg-sticky-menu">
<li>
<a class="yjscroll" data-before="120" href="#header">
Go back up
</a>
</li>
<li>
<a class="yjscroll" data-before="120" href="#scroll1">
Go to scroll 1
</a>
</li>
<li>
<a class="yjscroll" data-before="120" href="#scroll2">
Go to scroll 2
</a>
</li>
</ul>
</div>
</div>
<div class="yjsg-sticky" data-hide="yes" data-pushed="250" data-offset="550" data-effect="slide" data-sticky-menu data-sticky-block>
<div class="yjsgsitew inside-container">
<ul class="yjsg-sticky-menu">
<li>
<a class="yjscroll" data-before="120" href="#header">
Go back up
</a>
</li>
<li>
<a class="yjscroll" data-before="120" href="#scroll1">
Go to scroll 1
</a>
</li>
<li>
<a class="yjscroll" data-before="120" href="#scroll2">
Go to scroll 2
</a>
</li>
</ul>
</div>
</div>
I am scroll 1
I am scroll 2
