A Pen by Jatinder Assi.

Fixed-Header-.markdown

Fixed Header

Fixed Header

A Pen by Jatinder Assi on CodePen.

License.

index.html

<section class="container"> 
<header class="fixedHeader">
  HEADER
</header>
<section>
<p>  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor, sem nec tempor faucibus, justo enim luctus est, et scelerisque lectus orci et magna. Nullam lacinia consequat lorem, at elementum eros molestie in. Aenean vehicula congue purus, et fringilla purus gravida quis. Suspendisse sit amet enim risus. Vivamus vitae velit varius purus mollis consequat et eu lectus. Proin vel eleifend nibh. Fusce semper dui vitae tempor volutpat. Vestibulum et iaculis risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt arcu at lorem gravida, at facilisis nisl mollis.
  </p><p>
Curabitur porttitor augue at lobortis ultrices. Phasellus sit amet nisl a sem dictum scelerisque at eget est. Ut at tortor quis neque euismod sagittis dignissim eget dolor. Suspendisse laoreet, sapien ut volutpat dignissim, metus quam vehicula velit, eget tincidunt elit ipsum in justo. Nulla facilisi. Nunc at erat ac mi faucibus volutpat quis quis nisi. Praesent mattis sem eget massa mollis imperdiet. Donec rutrum, est at eleifend sagittis, lacus mauris laoreet neque, in mollis urna eros nec dolor.
  </p><p>
Fusce tincidunt dictum augue ut sodales. Nulla vel tristique nunc, sed tristique dolor. Sed tempus enim non nibh scelerisque, id congue ipsum mollis. Phasellus non massa quis justo auctor sollicitudin. Integer fringilla nec leo at pharetra. Pellentesque in porttitor est. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </p><p>
Duis dapibus faucibus felis et rutrum. Morbi feugiat quis dolor quis tempus. Nam non enim eros. Quisque quis lacus sit amet nisl gravida feugiat. Maecenas libero eros, mollis et elementum id, vestibulum sollicitudin risus. Nullam condimentum risus velit, id consectetur sem sollicitudin et. Nullam lacinia velit in purus consequat, eu convallis nisi aliquam. Sed viverra nibh non lorem dictum, at varius lacus volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse non tincidunt ante. Sed condimentum enim non metus pharetra aliquam. Curabitur a suscipit nisi. Cras eleifend mi vel felis gravida, eu elementum leo dignissim.
  </p><p>
In ut ipsum vitae nisi vestibulum pellentesque at eget lorem. Proin turpis ligula, feugiat sit amet ante sit amet, bibendum viverra nulla. Vivamus odio libero, auctor a mi in, auctor adipiscing ipsum. Fusce velit turpis, sagittis eget mollis ut, pulvinar sed nisl. Praesent adipiscing velit vulputate metus vehicula hendrerit. In faucibus nisl vel lacus fermentum, in vehicula lacus dapibus. Maecenas porttitor elementum lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin quis tortor pretium, tincidunt leo in, elementum eros. Curabitur iaculis suscipit turpis, eu cursus augue sodales in.</p>
</section>
  
</section> 

style.css

.fixedHeader{
  /* Required */
  width:960px;
  position:fixed;
  top:0;
  
  /* Optional */
  background:#bcbcbc;
  padding:20px;   
}

.container{
  width:990px;
  margin:0 auto;
}


p {
  padding:40px;
}