<h1>Demo property position: sticky</h1>
<section>
  <h2>Cum sociis natoque penatibus et magnis dis parturient montes</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Sagittis aliquam malesuada bibendum arcu vitae. Tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Nibh cras pulvinar mattis nunc. Libero nunc consequat interdum varius sit amet. Tellus in hac habitasse platea dictumst vestibulum rhoncus. Porttitor lacus luctus accumsan tortor posuere ac ut. Odio ut sem nulla pharetra diam sit amet nisl. Faucibus scelerisque eleifend donec pretium. At tellus at urna condimentum. Arcu risus quis varius quam quisque id diam vel quam. Gravida dictum fusce ut placerat orci nulla. Amet nulla facilisi morbi tempus. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Sagittis aliquam malesuada bibendum arcu vitae. Tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Nibh cras pulvinar mattis nunc. Libero nunc consequat interdum varius sit amet. Tellus in hac habitasse platea dictumst vestibulum rhoncus. Porttitor lacus luctus accumsan tortor posuere ac ut. Odio ut sem nulla pharetra diam sit amet nisl. Faucibus scelerisque eleifend donec pretium. At tellus at urna condimentum. Arcu risus quis varius quam quisque id diam vel quam. Gravida dictum fusce ut placerat orci nulla. Amet nulla facilisi morbi tempus. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Sagittis aliquam malesuada bibendum arcu vitae. Tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Nibh cras pulvinar mattis nunc. Libero nunc consequat interdum varius sit amet. Tellus in hac habitasse platea dictumst vestibulum rhoncus. Porttitor lacus luctus accumsan tortor posuere ac ut. Odio ut sem nulla pharetra diam sit amet nisl. Faucibus scelerisque eleifend donec pretium. At tellus at urna condimentum. Arcu risus quis varius quam quisque id diam vel quam. Gravida dictum fusce ut placerat orci nulla. Amet nulla facilisi morbi tempus. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Sagittis aliquam malesuada bibendum arcu vitae. Tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Nibh cras pulvinar mattis nunc. Libero nunc consequat interdum varius sit amet. Tellus in hac habitasse platea dictumst vestibulum rhoncus. Porttitor lacus luctus accumsan tortor posuere ac ut. Odio ut sem nulla pharetra diam sit amet nisl. Faucibus scelerisque eleifend donec pretium. At tellus at urna condimentum. Arcu risus quis varius quam quisque id diam vel quam. Gravida dictum fusce ut placerat orci nulla. Amet nulla facilisi morbi tempus. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Sagittis aliquam malesuada bibendum arcu vitae. Tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Nibh cras pulvinar mattis nunc. Libero nunc consequat interdum varius sit amet. Tellus in hac habitasse platea dictumst vestibulum rhoncus. Porttitor lacus luctus accumsan tortor posuere ac ut. Odio ut sem nulla pharetra diam sit amet nisl. Faucibus scelerisque eleifend donec pretium. At tellus at urna condimentum. Arcu risus quis varius quam quisque id diam vel quam. Gravida dictum fusce ut placerat orci nulla. Amet nulla facilisi morbi tempus. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris.</p>
</section>
<section>
  <h2>Nibh cras pulvinar mattis nunc</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Sagittis aliquam malesuada bibendum arcu vitae. Tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Nibh cras pulvinar mattis nunc. Libero nunc consequat interdum varius sit amet. Tellus in hac habitasse platea dictumst vestibulum rhoncus. Porttitor lacus luctus accumsan tortor posuere ac ut. Odio ut sem nulla pharetra diam sit amet nisl. Faucibus scelerisque eleifend donec pretium. At tellus at urna condimentum. Arcu risus quis varius quam quisque id diam vel quam. Gravida dictum fusce ut placerat orci nulla. Amet nulla facilisi morbi tempus. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Sagittis aliquam malesuada bibendum arcu vitae. Tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Nibh cras pulvinar mattis nunc. Libero nunc consequat interdum varius sit amet. Tellus in hac habitasse platea dictumst vestibulum rhoncus. Porttitor lacus luctus accumsan tortor posuere ac ut. Odio ut sem nulla pharetra diam sit amet nisl. Faucibus scelerisque eleifend donec pretium. At tellus at urna condimentum. Arcu risus quis varius quam quisque id diam vel quam. Gravida dictum fusce ut placerat orci nulla. Amet nulla facilisi morbi tempus. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Sagittis aliquam malesuada bibendum arcu vitae. Tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Nibh cras pulvinar mattis nunc. Libero nunc consequat interdum varius sit amet. Tellus in hac habitasse platea dictumst vestibulum rhoncus. Porttitor lacus luctus accumsan tortor posuere ac ut. Odio ut sem nulla pharetra diam sit amet nisl. Faucibus scelerisque eleifend donec pretium. At tellus at urna condimentum. Arcu risus quis varius quam quisque id diam vel quam. Gravida dictum fusce ut placerat orci nulla. Amet nulla facilisi morbi tempus. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Sagittis aliquam malesuada bibendum arcu vitae. Tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Nibh cras pulvinar mattis nunc. Libero nunc consequat interdum varius sit amet. Tellus in hac habitasse platea dictumst vestibulum rhoncus. Porttitor lacus luctus accumsan tortor posuere ac ut. Odio ut sem nulla pharetra diam sit amet nisl. Faucibus scelerisque eleifend donec pretium. At tellus at urna condimentum. Arcu risus quis varius quam quisque id diam vel quam. Gravida dictum fusce ut placerat orci nulla. Amet nulla facilisi morbi tempus. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Sagittis aliquam malesuada bibendum arcu vitae. Tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Nibh cras pulvinar mattis nunc. Libero nunc consequat interdum varius sit amet. Tellus in hac habitasse platea dictumst vestibulum rhoncus. Porttitor lacus luctus accumsan tortor posuere ac ut. Odio ut sem nulla pharetra diam sit amet nisl. Faucibus scelerisque eleifend donec pretium. At tellus at urna condimentum. Arcu risus quis varius quam quisque id diam vel quam. Gravida dictum fusce ut placerat orci nulla. Amet nulla facilisi morbi tempus. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris.</p>
 </section>
* {
  padding: 0;
  margin: 0;
}

body {
  background: #eee;
}

h1 {
  font: bold 30px/40px Verdana;
  margin: 30px;
}

section {
  margin: 30px;
  padding: 30px;
  background: #fff;
  
  h2 {
    font: bold 22px/24px Verdana;
    padding: 25px 0;
    margin: -25px 0;
    background: #fff;
    
    // Магия CSS
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 0; // Обязательное свойство, без него не прилипнет :)
  }
  
  p {
    font: 18px/24px Times;
    margin-top: 20px;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.