Simple CSS sticky Header fixed at top
HTML
<div class="container">
<nav class="ccsticky-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="cctop clearfix">
<a href="http://codeconvey.com/Tutorials/css-sticky-header-scroll/">View Demo</a>
<span class="right"><a href="http://codeconvey.com/create-simple-pur-css-sticky-header/">Read Article</a></span>
</div>
</nav>
<section>
<h1>CSS Sticky Header Scroll</h1>
<h3>Scroll Down</h3>
<p>It is so easy to create CSS sticky header scroll the page to down. You don't need to used any jquery or javascript.<br>
The sticky header will fixed at top of page which include navigation links.<br>When you scroll the page, the navigation bar comes along. Here is demo & download file avaiable for working example.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<h2>CSS Sticky Header Scroll</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>
</div>
CSS
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
background: #b8b1e8;
color: #000;
font-weight: 400;
font-size: 1em;
font-family: 'Lato', Arial, sans-serif;
margin:0;
padding:0;
padding-bottom:40px;
}
/* Sticky Navigation */
.ccsticky-nav {
width: 100%;
height: 60px;
position: fixed;
top: 0;
background: #139ed8;
}
.ccsticky-nav ul {
padding: 20px;
margin: 0 auto;
list-style: none;
text-align: center;
}
.ccsticky-nav ul li {
display: inline-block;
margin: 0 10px;
}
.ccsticky-nav ul li a {
padding: 10px 0;
color: #fff;
font-size: 1rem;
text-decoration: none;
font-weight: bold;
transition: all 0.2s ease;
text-transform: capitalize;
}
.ccsticky-nav ul li a:hover {
color: #34495E;
}
/* Headings */
h1 {
color: #34495e;
font-size: 2em;
font-weight: 600;
}
/* Sections */
section {
width: 100%;
padding: 50px;
border-bottom: 1px solid #ccc;
height: 1024px;
text-align: center;
margin-top: 60px;
}
section p {
font-size: 23px;
font-weight: 300;
line-height: 42px;
}
/* demo purpose only*/
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
a {
color: #4f4d4d;
text-decoration: none;
}
a:hover, a:focus {
color: #000;
}
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
a, button {
outline: none;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/* To Navigation Style */
.cctop {
background:#e5e5e5;
width: 100%;
text-transform: uppercase;
font-weight: 700;
font-size: 0.75em;
line-height: 3.2;
}
.cctop a {
display: inline-block;
padding: 0 1.5em;
text-decoration: none;
letter-spacing: 1px;
}
.cctop span.right {
float: right;
}
.cctop span.right a {
display: block;
float: left;
}
/* Header Style */
.ccheader {
margin: 0 auto;
padding: 2em;
text-align: center;
}
.ccheader h1 {
font-size: 2.625em;
font-weight: 300;
line-height: 1.3;
margin: 0;
}
.ccheader h1 span {
display: block;
padding: 0 0 0.6em 0.1em;
font-size: 60%;
opacity: 0.7;
}
/* Demo Buttons Style */
.codeconvey-demo {
padding-top: 1em;
font-size: 0.8em;
}
.codeconvey-demo a {
display: inline-block;
margin: 0.5em;
padding: 0.7em 1.1em;
outline: none;
border: 2px solid #fff;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
}
.codeconvey-demo a:hover,
.codeconvey-demo a.current-demo,
.codeconvey-demo a.current-demo:hover {
border-color: #333;
color: #333;
}
/* Wrapper Style */
.wrapper{
margin:0 auto;
padding-left:12%;
padding-right:12%;
}
section{ float:left; width:100%;}
.opt{
background: url(../images/bg.jpg) repeat-x;
padding:3%;
}
