Sticky header and Custom Scroll Bar in CSS

2 weeks ago

admin

2 minutes

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;}

#css #html