Position sticky

dabblet.css

/*			Position sticky			*/
section {
    display: block;
    margin: 3em;
    height: 3000px;
    width: 300px;
    background: rgba(0, 0, 255, 0.3);
}
 
article {
    heighjt: 5000px;
}
 
div {
    position: sticky;
    top: 10px; /* positional anchor needed to get sticky */
    z-index: 1;
    counter-increment: headers;
}
 
div:nth-child(2n) { background-color:rgba(0, 0, 255, .2); }
 
div::after {
   content: counter(headers);
   float: right
}

dabblet.html

<section>
  <article>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello world</div>
  </article>
</section>

dabblet.js

//

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}