Keep the header static on top while scrolling - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

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

Description

Keep the header static on top while scrolling

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">

.header {<!--   ww  w . j  a  v  a2  s  .c  o  m-->
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 48px;
   z-index: 10;
   background: #eeeeee;
   -webkit-box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
   -moz-box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
   box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
}
.header__content-text {
   text-align: center;
   padding: 15px 20px;
}
.my {
   margin: 100px auto;
   width: 975px;
   padding: 30px;
}


      </style> 
 </head> 
 <body> 
  <div class="header"> 
   <h1 class="header__content-text"> Header content will come here </h1> 
  </div> 
  <div class="my"> 
   <div style="height:600px;"> 
    <a href="http://imgur.com/k9hz3"> <img src="https://www.java2s.com/style/demo/Opera.png" title="Hosted by imgur.com" alt=""> </a> 
   </div> 
   <div style="height:600px;"> 
    <a href="http://imgur.com/TXuFQ"> <img src="https://www.java2s.com/style/demo/Google-Chrome.png" title="Hosted by imgur.com" alt=""> </a> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials