This is a normal row, in it there are 2 columns.

This column, the left one, has no special values but has to be quite long for the sticky column on the right to be worth it.

So excuse the following junk to make it long!


/* Sticky */

.sticky {
    position:-webkit-sticky;
    position:sticky;
      top: 1em;
}
body {
      overflow-x: visible;
}

@media (max-width: 767px) {
  body {
      overflow-x: hidden!important;
}
}

Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Auctor elit sed vulputate mi sit amet mauris. Odio ut sem nulla pharetra. Commodo odio aenean sed adipiscing diam. Pharetra et ultrices neque ornare aenean euismod elementum. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Enim sed faucibus turpis in eu mi. Morbi tincidunt ornare massa eget egestas. Viverra maecenas accumsan lacus vel facilisis.

Arcu non sodales neque sodales ut etiam sit. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. Nullam vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Lectus proin nibh nisl condimentum id. Consequat mauris nunc congue nisi vitae suscipit tellus mauris a. Amet venenatis urna cursus eget nunc scelerisque viverra mauris. Augue eget arcu dictum varius duis at. Tincidunt praesent semper feugiat nibh sed. Aliquam sem et tortor consequat id porta. Nullam non nisi est sit amet facilisis magna etiam. Facilisis leo vel fringilla est ullamcorper eget nulla. Eu consequat ac felis donec et odio pellentesque. Non nisi est sit amet facilisis magna etiam tempor orci. Volutpat sed cras ornare arcu. Tellus pellentesque eu tincidunt tortor aliquam nulla.

Risus viverra adipiscing at in tellus integer. Tempus iaculis urna id volutpat. Non blandit massa enim nec dui nunc mattis enim. Eget gravida cum sociis natoque penatibus et. Curabitur vitae nunc sed velit dignissim sodales ut eu. Magna etiam tempor orci eu. Sit amet purus gravida quis blandit turpis. Ultricies mi eget mauris pharetra et ultrices. Congue eu consequat ac felis donec et odio pellentesque diam. Ante metus dictum at tempor commodo. Pellentesque nec nam aliquam sem et. Turpis egestas integer eget aliquet nibh praesent. Maecenas pharetra convallis posuere morbi leo urna molestie at. Mattis molestie a iaculis at erat pellentesque adipiscing commodo elit. At tellus at urna condimentum mattis.

Dictum sit amet justo donec. Eu mi bibendum neque egestas congue quisque. Faucibus in ornare quam viverra. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Neque convallis a cras semper auctor neque vitae tempus. Eu consequat ac felis donec et odio pellentesque diam. Et sollicitudin ac orci phasellus egestas tellus. Tellus mauris a diam maecenas sed enim ut sem. Ut placerat orci nulla pellentesque dignissim enim. Nascetur ridiculus mus mauris vitae ultricies leo. Volutpat maecenas volutpat blandit aliquam etiam erat. Suspendisse faucibus interdum posuere lorem ipsum dolor sit. Volutpat blandit aliquam etiam erat velit scelerisque in. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit.

Urna molestie at elementum eu facilisis sed odio. Interdum consectetur libero id faucibus nisl tincidunt. Arcu cursus euismod quis viverra nibh. Mus mauris vitae ultricies leo integer. Lacus laoreet non curabitur gravida arcu ac tortor dignissim. Ut morbi tincidunt augue interdum velit euismod in pellentesque massa. Vulputate eu scelerisque felis imperdiet proin fermentum leo vel. Donec ac odio tempor orci. Dictumst quisque sagittis purus sit amet. Dignissim convallis aenean et tortor at. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Tincidunt id aliquet risus feugiat in ante metus dictum. In dictum non consectetur a erat nam at. A iaculis at erat pellentesque adipiscing.

This text is within a div.

The div has the class .sticky which the code is in the page CSS. I've changed colour and padding for visual effect.

You can put anything you want in the div.

The space above the div when it's sticky is controlled by the CSS - bear in mind your header if that is also sticky when you use it.

In the CSS it also turns the sticky property off for mobile, so it just acts like another column in PRO and collapses down. May be instances you don't want that, so just remove the media query in the CSS.