Sticky Element

Component
OutSystems
1

This is a block component and it consists of two columns, where the user can determine the width of both and the sticky column will be fixed to the top when scrolling through the other column. 

The user can add an offset value that is the distance between the top of the page and the fixed content, change the background color and place any component in both columns.

Under 768px both columns will become normal columns.

Libraries

Bootstrap
jQuery
Sticky Kit

HTML Code






[ PLACE STICKY CONTENT ]





[ PLACE CONTENT ]



How to Implement

Inside one of the columns place the sticky element (.sticky-column) that can contain other components inside. The other column can have other components as well.

If the components are added in the fixed column but after the sticky-column div the sticky div will be placed over the other content when becoming fixed to the screen.

The div with the grid classes (col-*) must be the direct parent of the sticky element div (sticky-column). If there is a div between the two, the sticky element will be fixed to that div and it’s height and not to the column that has the same height as the other side.

In screens under 768px the sticky effect is removed, the user should add a col-12 to the columns so the content will be placed as a continuous text.

The user can add an offset, this will be the distance between the top of the page and this element when it is fixed.

In case the user doesn’t add an offset or adds the value 0 (zero) don’t print the sticky-offset attribute in the element. The value (numeric value) of the offset attribute will be converted to px.

 

Tasks Front End

DMW-122

Tasks Back End

DMW-197 DMW-1083

Tasks details

NA

Views Path

...\ src\ Feature\ PageStructure\ code\ Views\ Sticky\ StickyElement.cshtml

Component Variations

Default


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi finibus nisi quis justo porta, ac molestie ante elementum. Fusce ac congue risus. Quisque vehicula mi ut velit sagittis, id mattis magna maximus. 

Aenean malesuada, dolor sed venenatis auctor, sapien lorem bibendum risus, vel mollis lacus nibh a nulla. Donec consequat eget metus sit amet fermentum. Nulla vitae pharetra erat. Sed dapibus, neque at consectetur mollis, orci nulla dictum lacus, ut tristique nisl lectus ac mauris. Aliquam erat volutpat. Vivamus cursus sed urna quis tempus. Morbi eget turpis sagittis, rhoncus diam sit amet, pulvinar leo. Etiam diam orci, dapibus sed pharetra a, laoreet non risus. In volutpat, ligula sed semper porta, augue mauris ultricies lectus, a volutpat arcu erat non purus. Duis imperdiet vitae tellus id finibus. Donec ex nisi, interdum eget magna feugiat, sollicitudin scelerisque elit.

Maecenas eget faucibus nisi. Ut in ligula felis. Duis sit amet tristique nibh, vel sodales enim. Cras fringilla nibh ut tortor pharetra consequat. Morbi tincidunt hendrerit tortor, vitae tincidunt mi volutpat ac. Phasellus in ornare mauris. Nullam convallis eu massa at porttitor. Praesent pharetra elit et euismod faucibus. Duis vitae ex tempor, condimentum augue in, porta massa. Cras auctor odio in tortor vehicula, sit amet hendrerit arcu tempor. Curabitur nec neque sodales massa interdum mollis. Quisque ultrices orci id ex vulputate pharetra.

Praesent augue enim, vulputate ut eros vel, finibus pharetra lacus. Sed commodo ullamcorper rhoncus. Donec mollis condimentum scelerisque. Praesent iaculis fermentum arcu sit amet facilisis. Vestibulum porta, nulla a tempor sollicitudin, metus turpis facilisis purus, vel venenatis nisl elit in tortor. Nulla pretium, neque at aliquet tempor, mi turpis dignissim ipsum, at ornare quam augue vitae turpis. In hac habitasse platea dictumst. Pellentesque accumsan nibh nulla, non varius magna scelerisque nec.

How to use
  1. Go to the Content Editor
  2. Go to the Experience Editor and insert a Sticky Element Component into the page.
  3. Add inside each placeholder the desired content.
  4. Save and publish.
  5. Navigate to the page where you added the Sticky component and scroll down.
  6. Scroll down, the left column must stop scrolling while the right column continues to scroll.

Undeveloped Options

Example page

Figma Link