Make header in a scrollable sidebar sticky - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Header

Description

Make header in a scrollable sidebar sticky

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

*, *:before, *:after {<!--   w w w  .j av  a 2s  . c  om-->
   box-sizing: border-box;
}
#side-panel {
   position: fixed;
   bottom: 0;
   right: 0;
   width: 400px;
   height: 200px;
   border: 1px solid;
}
.side-panel-body {
   width: 100%;
   height: 100px;
   overflow: auto;
}


      </style> 
 </head> 
 <body> 
  <div id="side-panel" class="ember-view presented"> 
   <div class="side-panel-header"> 
    <h2>My header</h2> 
   </div> 
   <div class="side-panel-body"> 
    <div class="timeline"> 
     <ol> 
      <li> 
       <div class="type" data-type="milestone">
         thing 
       </div> </li> 
      <li> 
       <div class="type" data-type="milestone">
         thing 
       </div> </li> 
      <li> 
       <div class="type" data-type="milestone">
         thing 
       </div> </li> 
      <li> 
       <div class="type" data-type="milestone">
         thing 
       </div> </li> 
      <li> 
       <div class="type" data-type="milestone">
         thing 
       </div> </li> 
      <li> 
       <div class="type" data-type="milestone">
         thing 
       </div> </li> 
      <li> 
       <div class="type" data-type="milestone">
         thing 
       </div> </li> 
      <li> 
       <div class="type" data-type="milestone">
         thing 
       </div> </li> 
      <li> 
       <div class="type" data-type="milestone">
         thing 
       </div> </li> 
      <li> 
       <div class="type" data-type="milestone">
         thing 
       </div> </li> 
      <li> 
       <div class="type" data-type="milestone">
         thing 
       </div> </li> 
      <li> 
       <div class="type" data-type="milestone">
         thing 
       </div> </li> 
      <li> 
       <div class="type" data-type="milestone">
         thing 
       </div> </li> 
      <li> 
       <div class="type" data-type="milestone">
         thing 
       </div> </li> 
      <li> 
       <div class="type" data-type="milestone">
         last 
       </div> </li> 
     </ol> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials