Sticky Element

General Info

Sticky Element represents the container that can host any element with the property of becoming sticky on viewport top.


Sticky Element is being used in many theme modules.


Structure

Sticky Element structure is as follows:


<div class="sticky-element">
    <div> ... </div>
</div>

Responsive

The element that is inside .sticky-element is the one that actually becomes position:fixed .You need to specify on what screen resolutions the elements will become sticky, using following classes:

  • .sticky-mobile - for mobile resolution/li>
  • .sticky-tablet - for tablet resolution
  • .sticky-desktop - for desktop resolution
  • .sticky-large-desktop - for large-desktop resolution
  • .sticky-all - for all resolutions

Sample Sticky Element 

<div class="sticky-element sticky-all">
    <div> ... </div>
</div>

Options

When the header is sticky, sticky-element can be relative to header using this class .under-ths.

Under Top Header Sticky Element 

<div class="sticky-element sticky-all under-ths">
    <div> ... </div>
</div>

Text for page scroll: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus magna vel ex semper, in pharetra justo pulvinar. Donec non quam vitae justo mattis vestibulum a nec nisi. Morbi mi felis, ultrices vitae risus consectetur, porta ultrices sapien. Nunc sit amet velit nibh. Proin consectetur, ante quis tristique mattis, massa massa condimentum enim, quis euismod arcu purus ac eros. Sed dictum elementum odio, id viverra est auctor nec. Sed condimentum dolor justo, vitae mattis magna maximus feugiat. Mauris malesuada leo libero, vitae tempor ante sagittis vitae. Suspendisse consectetur facilisis enim. Donec sollicitudin sed nibh eget rutrum. Donec tincidunt nibh non feugiat suscipit. Ut ultricies pretium erat non aliquet. In hac habitasse platea dictumst. Integer quis tortor enim. Integer et elit nec magna ultricies convallis. In venenatis eu erat et facilisis. Vestibulum congue enim nisl. Fusce arcu enim, porta a auctor vel, hendrerit a libero. Vivamus vel dapibus sem. Cras nec felis nibh. Etiam consequat ligula ac dolor aliquet vulputate. Quisque sagittis bibendum enim, et auctor mi faucibus at. Nunc nec nisi nulla. Donec eget sollicitudin diam. Nulla quis ligula eget mi euismod eleifend vitae eu lectus. Suspendisse potenti. Proin eu lobortis lorem. Phasellus sed neque consequat, sodales risus vitae, interdum erat. Sed quis nibh sit amet ligula tincidunt sodales sit amet sed lorem. In pellentesque id magna mattis rhoncus. In bibendum, odio eu mollis rhoncus, urna ipsum tincidunt metus, nec sollicitudin orci urna in ante. Mauris sollicitudin lorem eu bibendum bibendum. Morbi suscipit convallis euismod. Quisque ac nisl ac felis pharetra fermentum ac quis sapien. Duis sed est semper, eleifend orci nec, elementum arcu. Aenean quis egestas metus, id semper quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam vulputate varius leo. Proin mattis mattis nunc a tristique. Praesent diam mauris, laoreet sed leo vitae, placerat euismod magna. Praesent non nunc dui. Pellentesque sed diam ex. Morbi suscipit porttitor imperdiet. Curabitur vitae turpis non eros sodales rutrum pharetra id ipsum. Nullam nec diam porta, interdum quam sed, elementum lorem. Phasellus consequat enim odio, sed dapibus ligula sagittis quis. Morbi varius iaculis ex, blandit molestie eros lobortis eget. Morbi fringilla diam nec nunc mollis, vehicula placerat odio facilisis. Mauris eu ipsum aliquam augue elementum commodo sed at erat. Cras rhoncus facilisis magna quis sodales. Praesent at magna mauris. Nullam ex ipsum, elementum ac neque at, bibendum sodales arcu. Proin tincidunt scelerisque tempor. Vestibulum vulputate, justo sed mollis aliquam, dui mi efficitur nibh, eu scelerisque magna felis non elit. Sed mollis varius massa vitae cursus. Aliquam ut turpis pellentesque, maximus libero sit amet, egestas felis. Aenean sit amet ipsum arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quis orci tempus justo euismod tristique eu sit amet lectus. Phasellus vehicula sem quam, et rhoncus erat rutrum sed. Suspendisse ornare, eros non pretium euismod, nibh sem gravida lorem, vitae ultricies purus augue nec nibh. Sed vel eros nec arcu porttitor euismod. Aliquam porttitor ex id vulputate consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla vitae facilisis ante, sed commodo magna. Ut pretium non sem in feugiat.