STICKY: StickyKit

by cibulka

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.js"></script>
<div style="font-size: 1.25em; margin-bottom: 2em; font-style: italic">
  <h1>Sticky - StickyKit</h1>
  This is content before. URL: <a href="">StickyKit</a>
</div>

<div class="con clearfix">

  <div class="l sticky">
    <h1>.L: I am left STICKY</h1>
    <p>
       Nam fermentum mollis scelerisque. Aliquam libero velit, pulvinar eu magna ut, porttitor congue dui. Duis sit amet sem risus. Morbi eget sapien a leo ultrices scelerisque sed non risus. Morbi efficitur pellentesque nunc, id sollicitudin lectus viverra non. Praesent quis neque ut neque scelerisque feugiat. Integer quis placerat erat, in ullamcorper quam. Nulla facilisi. Sed vitae elit condimentum, finibus massa in, suscipit purus. Curabitur ut dictum diam, a congue ligula. Suspendisse at mauris maximus, ultrices quam nec, mollis mi. Praesent porttitor magna tellus, ut fringilla neque viverra sed. Sed posuere ligula arcu, non sodales turpis gravida a.
    </p>
    <p>
       Nam fermentum mollis scelerisque. Aliquam libero velit, pulvinar eu magna ut, porttitor congue dui. Duis sit amet sem risus. Morbi eget sapien a leo ultrices scelerisque sed non risus. Morbi efficitur pellentesque nunc, id sollicitudin lectus viverra non. Praesent quis neque ut neque scelerisque feugiat. Integer quis placerat erat, in ullamcorper quam. Nulla facilisi. Sed vitae elit condimentum, finibus massa in, suscipit purus. Curabitur ut dictum diam, a congue ligula. Suspendisse at mauris maximus, ultrices quam nec, mollis mi. Praesent porttitor magna tellus, ut fringilla neque viverra sed. Sed posuere ligula arcu, non sodales turpis gravida a.
    </p>
    <p>
       Nam fermentum mollis scelerisque. Aliquam libero velit, pulvinar eu magna ut, porttitor congue dui. Duis sit amet sem risus. Morbi eget sapien a leo ultrices scelerisque sed non risus. Morbi efficitur pellentesque nunc, id sollicitudin lectus viverra non. Praesent quis...

CSS

.sticky {
  width: 45%; 
  /*
  position: sticky; 
  position: -webkit-sticky; 
  top: 0;
  */
}

.l { float: left; }
.r { float: right; }
img { max-width: 100%; }

.con { position: relative; background: #eee; padding: 1em; }

.clearfix:before, .clearfix:after {
  content: '';
  display: table;
}

.clearfix:after {
  clear:both;
}

JavaScript

$('.sticky').stick_in_parent();