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 | 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. |
<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> Lorem ipsum dolor sit amet, consectetur Proclivi currit oratio. Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet.
Satisne ergo pudori consulat, si quis sine teste libidini pareat? Bonum integritas misera debilitas. Certe non potest.
Si stante, videlicet vult, salvam esse se, quod concedimus; Duo Reges: constructio interrete.
Vivamus porta eros et neque vulputate pretium. Viva mus vel velit metus, sceleri
Vivamus porta eros et neque vulputate pretium. Viva mus vel velit metus, sceleri
Vivamus porta eros et neque vulputate pretium. Viva mus vel velit metus, sceleri