Sticky header and Custom Scroll Bar in CSS
Sticky header and Custom Scroll Bar in CSS
Demo: https://codepen.io/agevenkat/pen/MWQZMzO
HTML
<div class="cont"> <dl class="container"> <dt>A</dt> <dd>Alpha</dd> <dd>Alpha</dd> <dd>Alpha</dd> <dd>Alpha</dd> <dd>Alpha</dd> <dd>Alpha</dd> <dd>Alpha</dd> <dd>Alpha</dd> <dd>Alpha</dd> <dd>Alpha</dd> <dd>Alpha</dd> <dd>Alpha</dd> <dt>B</dt> <dd>Bravo</dd> <dd>Bravo</dd> <dd>Bravo</dd> <dd>Bravo</dd> <dd>Bravo</dd> <dd>Bravo</dd> <dd>Bravo</dd> <dd>Bravo</dd> <dd>Bravo</dd> <dd>Bravo</dd> <dd>Bravo</dd> <dd>Bravo</dd> <dd>Bravo</dd> <dd>Bravo</dd> <dt>C</dt> <dd>Charlie</dd> <dd>Charlie</dd> <dd>Charlie</dd> <dd>Charlie</dd> <dd>Charlie</dd> <dd>Charlie</dd> <dd>Charlie</dd> <dd>Charlie</dd> <dd>Charlie</dd> <dd>Charlie</dd> <dd>Charlie</dd> <dd>Charlie</dd> <dd>Charlie</dd> <dd>Charlie</dd> </dl> </div>
CSS
.cont { font-family: Merriweather, serif; height:350px; overflow:hidden; border:1px solid #ccc; width: 300px; overflow-y: scroll; } .container { position:relative; display:block; } .container dd {line-height:30px;} .container dt { position:sticky; top:0; height:30px; background-color:#AD86F7; color:#ffffff; padding:10px 0px 0px 10px; margin:10px 0px 10px 0px; } ::-webkit-scrollbar { width: 10px;} ::-webkit-scrollbar-track {background:#f4f4f4; border-radius:50px;} ::-webkit-scrollbar-thumb {background:#6600ff; border-radius:50px;}