Sticky demo

by Vladimir

HTML

<div data-lorem="p">
  <span class="sticky"><h2>header 1</h2><img src="http://www.html5rocks.com/static/images/share.png" title="Just an example"></span>
Vitae congue eu consequat ac felis donec et odio. Aliquam purus sit amet luctus venenatis. Ultrices eros in cursus turpis massa. Gravida dictum fusce ut placerat orci. Id volutpat lacus laoreet non curabitur gravida arcu. Vivamus arcu felis bibendum ut tristique et egestas quis. Risus ultricies tristique nulla aliquet enim tortor. Pellentesque dignissim enim sit amet venenatis urna. Felis eget velit aliquet sagittis. Velit laoreet id donec ultrices tincidunt arcu non sodales. Nisi quis eleifend quam adipiscing vitae proin sagittis. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Tristique risus nec feugiat in.
Egestas diam in arcu cursus euismod quis viverra nibh. Placerat in egestas erat imperdiet sed euismod nisi. Egestas diam in arcu cursus euismod quis. Eget velit aliquet sagittis id consectetur. Egestas sed sed risus pretium quam vulputate dignissim suspendisse in. Eros in cursus turpis massa tincidunt dui ut ornare lectus. In metus vulputate eu scelerisque felis imperdiet. Maecenas volutpat blandit aliquam etiam erat. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Enim neque volutpat ac tincidunt. Et malesuada fames ac turpis egestas sed tempus urna. Massa sed elementum tempus egestas.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt. Tristique senectus et netus et malesuada fames ac turpis egestas. Tristique magna sit amet purus gravida quis blandit. Augue eget arcu dictum varius duis. Leo vel fringilla est ullamcorper eget. Integer quis auctor elit sed. Sagittis vitae et leo duis ut. Senectus et netus et malesuada fames ac turpis egestas maecenas. Quam vulputate dignissim suspendisse in est ante in nibh mauris. Donec et odio pellentesque diam volutpat commodo. Egestas...

CSS

body {
  background: #000;
}
div {
  width: 400px;
  margin: 0 auto;
}
[data-lorem] {
    margin-top: 2em;
    line-height: 1.5;
    text-align: justify;
    background: #eee;
    border-radius: 5px;
    padding: 15px;
}
[data-lorem] .sticky {
    background: #3A5E8C;
    padding: 15px 10px;
    color: white;
    border-radius: 5px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}
.sticky {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 10px;
    z-index: 1;
}