10+ JavaScript Header Examples

This post contains a total of 10+ JavaScript Header Examples with Source Code. All these Website Headers are made using JavaScript and Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Header Examples

1. By Dylan Macnab

Made by Dylan Macnab. Responsive Scroll Header. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
  height: 1500px;
  background: url(https://www.brainpickings.org/wp-content/themes/brainpickings/images/bckgd_body.png);
}

.offset {
  margin-top: 0;
  padding-top: 270px;
  text-align: center;
  transition: 0.3s;
}

.header {
  position: fixed;
  width: 100%;
  height: 250px;
  font-weight: bold;
  text-align: center;
  background: gold;
  transition: 0.3s;
}
.header.small {
  height: 70px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.header.small ~ .offset {
  padding-top: 140px;
}
.header.small .header_logo {
  padding-top: 20px;
  font-size: 20px;
  text-shadow: none;
}

.header_logo {
  font-family: "Oswald", sans-serif;
  margin: 0;
  padding-top: 80px;
  font-size: 50px;
  text-shadow: 3px 4px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
}
</style>
</head>
<body>
  <div class="header">
  <h1 class="header_logo">Resizing Fixed Header</h1>
</div>
<div class="offset">
  <p>Scroll down to initiate resizing of the page header.</p>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(document).scroll(function () {
  navbarScroll();
});

function navbarScroll() {
  var y = window.scrollY;
  if (y > 10) {
    $('.header').addClass('small');
  } else if (y < 10) {
    $('.header').removeClass('small');
  }
}
    </script>
</body>
</html>

2. By Brady Sammons

Made by Brady Sammons. Sticky Header with CSS Transition. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background-color: #ecf0f1;
  font-family: helvetica, arial, sans-serif;
  font-size: 16px;
  padding-top: 330px;
  -moz-transition: padding-top 0.5s ease;
  -o-transition: padding-top 0.5s ease;
  -webkit-transition: padding-top 0.5s ease;
  transition: padding-top 0.5s ease;
}

header {
  width: 100%;
  height: 300px;
  background-color: #3498db;
  text-align: center;
  position: relative;
  position: fixed;
  top: 0;
  overflow: hidden;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
header h1 {
  font-size: 42px;
  color: #fff;
  line-height: 230px;
  text-transform: uppercase;
  font-weight: 100;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
header nav {
  position: absolute;
  bottom: 0;
  height: 60px;
  line-height: 60px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.1);
}
header nav a {
  color: #fff;
  display: inline-block;
  padding: 10px 15px;
  line-height: 1;
  text-decoration: none;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
header nav a:hover {
  -moz-box-shadow: 0 0 0 1px #fff;
  -webkit-box-shadow: 0 0 0 1px #fff;
  box-shadow: 0 0 0 1px #fff;
}

h2 {
  font-size: 34px;
  text-transform: uppercase;
  font-weight: 100;
  line-height: 2;
  color: #2c3e50;
}

p {
  margin-bottom: 2rem;
  line-height: 2;
  color: #7f8c8d;
}

.wrapper {
  width: 800px;
  margin: 0 auto;
}

section {
  padding: 20px;
  margin-bottom: 40px;
  background-color: #fff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

/* Sticky Header Style */
/* ---------------------------------------- */
body.sticky-header {
  padding-top: 100px;
}
body.sticky-header header {
  height: 60px;
  background-color: rgba(52, 152, 219, 0.9);
}
body.sticky-header header h1 {
  -moz-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
  transform: scale(0, 0);
}
</style>
</head>
<body>
  <header>
    <h1>Sticky Header Pow!</h1>
    <nav>
      <a href="">Home</a>
      <a href="">About</a>
      <a href="">Gallery</a>
      <a href="">Contact</a>
    </nav>
  </header>
  <div class="wrapper">
    <section id='steezy'>
      <h2> This is some steezy stuff</h2>
      <p>Add More Text to See Effect.</p>

    </section>
  </div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(function () {
  $(window).scroll(function () {
    var winTop = $(window).scrollTop();
    if (winTop >= 30) {
      $("body").addClass("sticky-header");
    } else {
      $("body").removeClass("sticky-header");
    } //if-else
  }); //win func.
}); //ready func.
    </script>
</body>
</html>

3. By Magnificode

Made by Magnificode. Header with Neat Parallax Hero Effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat);
body, html {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
}

.hero-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  min-height: 105px;
  background-image: url(https://images.unsplash.com/photo-1442606383395-175ee96ed967?q=80&fm=jpg&s=5c8c74be9bc91b47c79a1aaf92264be5);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.hero-nav .hero-nav__inner {
  z-index: 1;
}
.hero-nav h1 {
  color: #efefef;
  font-size: 5vw;
}
.hero-nav:before {
  content: "";
  background: rgba(0, 0, 0, 0);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: background 400ms;
}
.hero-nav.fixme:before {
  background: rgba(0, 0, 0, 0.8);
}

.page-content {
  width: 30em;
  margin: 0 auto;
  line-height: 1.625;
}
</style>
</head>
<body>
  <div class="hero-nav">
    <div class="hero-nav__inner">
        <h1>Neat Title</h1>
        <div class="hero-nav__button">
            <a href="#" class="btn"></a>
        </div>
    </div>
</div>
<div class="page-content">
    <p>Text Here</p>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
var heroShinker = function () {
  var hero = $('.hero-nav'),
  heroHeight = $('.hero-nav').outerHeight(true);
  $(hero).parent().css('padding-top', heroHeight);
  $(window).scroll(function () {
    var scrollOffset = $(window).scrollTop();
    if (scrollOffset < heroHeight) {
      $(hero).css('height', heroHeight - scrollOffset);
    }
    if (scrollOffset > heroHeight - 215) {
      hero.addClass('fixme');
    } else {
      hero.removeClass('fixme');
    };
  });
};
heroShinker();
    </script>
</body>
</html>

4. By Charles Ojukwu

Made by Charles Ojukwu. Wavy Header. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Work+Sans:200,300,400,600'>
<style>
*, *:before, *:after {
  box-sizing: border-box;
}

html {
  font-family: "Work Sans", sans-serif;
  color: #333;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 300;
}

body {
  margin: 0;
  padding: 0;
  background: #f8f8f8;
}

.header,
.content {
  min-height: 100px;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.header {
  background-color: #22184c;
  color: #ddf;
}

.content {
  color: #22184c;
}

h1 {
  font-size: 3rem;
  letter-spacing: 0.1ch;
  font-weight: 300;
  margin: 0;
  opacity: 0.5;
}

.canvas-wrap {
  max-width: 100%;
  overflow: hidden;
  position: absolute;
  transform: translateY(-50%);
}

canvas {
  display: block;
}
</style>
</head>
<body>
  <div class="header">
  <h1>Animated waves...</h1>
  
</div>
<div class="canvas-wrap">
  <canvas id="canvas"></canvas>
</div>
<div class="content">
  <h1>Animated waves...</h1>
</div>
      <script>
(function () {
  "use strict";

  var cvs, ctx;
  var nodes = 6;
  var waves = [];
  var waveHeight = 60;
  var colours = ["#f80000", "#00f800", "#0000f8"];

  // Initiator function
  function init() {
    cvs = document.getElementById("canvas");
    ctx = cvs.getContext("2d");
    resizeCanvas(cvs);

    for (var i = 0; i < 3; i++) {
      waves.push(new wave(colours[i], 1, nodes));
    }

    update();
  }

  function update() {
    var fill = window.getComputedStyle(document.querySelector(".header"), null).getPropertyValue("background-color");
    ctx.fillStyle = fill;
    ctx.globalCompositeOperation = "source-over";
    ctx.fillRect(0, 0, cvs.width, cvs.height);
    ctx.globalCompositeOperation = "screen";
    for (var i = 0; i < waves.length; i++) {
      for (var j = 0; j < waves[i].nodes.length; j++) {
        bounce(waves[i].nodes[j]);
      }
      drawWave(waves[i]);
    }
    ctx.fillStyle = fill;

    requestAnimationFrame(update);
  }

  function wave(colour, lambda, nodes) {

    this.colour = colour;
    this.lambda = lambda;
    this.nodes = [];
    var tick = 1;

    for (var i = 0; i <= nodes + 2; i++) {
      var temp = [(i - 1) * cvs.width / nodes, 0, Math.random() * 200, .3];
      this.nodes.push(temp);
      console.log(temp);
    }
    console.log(this.nodes);
  }

  function bounce(nodeArr) {
    nodeArr[1] = waveHeight / 2 * Math.sin(nodeArr[2] / 20) + cvs.height / 2;
    nodeArr[2] = nodeArr[2] + nodeArr[3];

  }

  function drawWave(obj) {

    var diff = function (a, b) {
      return (b - a) / 2 + a;
    };

    ctx.fillStyle = obj.colour;
    ctx.beginPath();
    ctx.moveTo(0, cvs.height);
    ctx.lineTo(obj.nodes[0][0], obj.nodes[0][1]);

    for (var i = 0; i < obj.nodes.length; i++) {

      if (obj.nodes[i + 1]) {
        ctx.quadraticCurveTo(
        obj.nodes[i][0], obj.nodes[i][1],
        diff(obj.nodes[i][0], obj.nodes[i + 1][0]), diff(obj.nodes[i][1], obj.nodes[i + 1][1]));

      } else
      {
        ctx.lineTo(obj.nodes[i][0], obj.nodes[i][1]);
        ctx.lineTo(cvs.width, cvs.height);
      }
    }
    ctx.closePath();
    ctx.fill();
  }

  function drawNodes(array) {
    ctx.strokeStyle = "#888";

    for (var i = 0; i < array.length; i++) {
      ctx.beginPath();
      ctx.arc(array[i][0], array[i][1], 4, 0, 2 * Math.PI);
      ctx.closePath();
      ctx.stroke();
    }

  }

  function drawLine(array) {
    ctx.strokeStyle = "#888";

    for (var i = 0; i < array.length; i++) {

      if (array[i + 1]) {
        ctx.lineTo(array[i + 1][0], array[i + 1][1]);
      }
    }

    ctx.stroke();
  }

  function resizeCanvas(canvas, width, height) {

    if (width && height) {
      canvas.width = width;
      canvas.height = height;
    } else
    {

      if (window.innerWidth > 1920) {
        canvas.width = window.innerWidth;
      } else
      {
        canvas.width = 1920;
      }

      canvas.height = waveHeight;
    }
  }

  document.addEventListener("DOMContentLoaded", init, false);
})();
    </script>
</body>
</html>

5. By WebMadeWell

Made by WebMadeWell. CSS Header Image with Parallax Scrolling Effect. Source

<!DOCTYPE html>
<html lang="en" class="webmadewell">
<head>
  <title></title>
<style>
.webmadewell {
  background-color: white;
}
body {
  margin: 0;
}
.sample-header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background-image: url("http://webmadewell.com/wp-content/uploads/2018/01/img-bg-sample-parallax-header.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.sample-header::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: MidnightBlue;
  opacity: 0.3;
}
.sample-header-section {
  position: relative;
  padding: 15% 0 10%;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  color: white;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
  font-family: "Montserrat", sans-serif;
}
h1 {
  font-weight: 500;
}
h2 {
  font-weight: 400;
}
.sample-section-wrap {
  position: relative;
  background-color: white;
}
.sample-section {
  position: relative;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  padding: 40px;
}
</style>
</head>
<body>
  <div class="sample-header">
  <div class="sample-header-section">
    <h1>Scroll down to see the parallax effect</h1>
    <h2>Background landcape scrolls with its own depth </h2>
  </div>
</div>
<div class="sample-section-wrap">
  <div class="sample-section">
    <p>Add some text</p>
  </div>
</div>
  <script src='https://code.jquery.com/jquery-latest.min.js'></script>
      <script>
function parallax_height() {
  var scroll_top = $(this).scrollTop();
  var sample_section_top = $(".sample-section").offset().top;
  var header_height = $(".sample-header-section").outerHeight();
  $(".sample-section").css({ "margin-top": header_height });
  $(".sample-header").css({ height: header_height - scroll_top });
}
parallax_height();
$(window).scroll(function () {
  parallax_height();
});
$(window).resize(function () {
  parallax_height();
});
    </script> 
</body>
</html>

6. By Liliana Kastilio

Made by Liliana Kastilio. Header with Resize Effect on Scroll. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
header.smaller {
	height: 75px;
}

header.smaller h1#logo {
	width: 150px;
	height: 75px;
	line-height: 55px;
	font-size: 55px;
	margin: 0;
}

header.smaller nav a {
	line-height: 75px;
}

*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	color: #505050;
	font-family: "Open Sans", sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.8;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1;
	font-weight: 100;
	color: #77C7AC;
}

a {
	text-decoration: none;
	color: #fcfcfc;
	font-weight: 300;
}

a:hover {
	color: #3c3c3c;
}

#wrapper {
	width: 100%;
	margin: 0 auto;
}

#main {
	background-color: #fff;
	padding-top: 150px;
  min-height:500px;
}

.container {
	width: 80%;
	margin: 0 auto;
	padding: 0 30px;
}

section {
	padding: 60px 0;
}

section h1 {
	font-weight: 700;
	margin-bottom: 10px;
}

section p {
	margin-bottom: 30px;
}

section p:last-child {
	margin-bottom: 0;
}

section.color {
	background-color: #f4f4f4;
}

header {
	width: 100%;
	height: 10em;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
  border-bottom:solid 0.5em #f4f4f4;
	background-color: #394e63;
	transition: height 0.3s;
}

header h1#logo {
	display: inline-block;
	line-height:3em;
   margin: 0;
   padding:0 1em;
   background-color:#fd5559;
	float: left;
	font-family: "Open Sans", sans-serif;
	font-size: 60px;
	color: #fcfcfc;
  text-shadow: 0.1em 0.03em #C0392B;
	font-weight: 400;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

header nav {
	display: inline-block;
	float: right;
}

header nav a {
	line-height: 150px;
	margin-left: 20px;
	color: #fcfcfc;
	font-weight: 300;
	font-size: 1em;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

header nav a:hover {
	color: #fd5559;
}

header.smaller {
	height: 75px;
}

header.smaller h1#logo {
	line-height: 75px;
	font-size: 30px;
}

header.smaller nav a {
	line-height: 75px;
}

footer {
	background-color: #3c3c3c;
	text-align: center;
   min-height:17em;
   color: #bababa;
}

footer  a {
	display: inline-block;
	margin: 0;
  text-decoration:underline;
}
footer div.col {
  width:20%;
  display:inline-block;
  vertical-align: top;
}
footer col a {
  display:block;
}

footer ul li a:hover {
	color: #fd5559;
}
footer ul li a {
    color: #bababa;  
}
footer div#copy {
  margin-top: 1em;
  padding:0;
}
footer div#copy a {
  color: #fd5559;  
}
footer div.container {
  position:relative;
  
}
footer ul{
  list-style:none;
  margin-top:2em;
  padding:0;
}
footer ul li {
  text-align:left;
  margin:0;
  padding:0;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	content: "";
	clear: both;
	height: 0;
}

@media all and (max-width: 760px) {
	header h1#logo {
		display: block;
		float: none;
		margin: 0 auto;
		height: 100px;     
		line-height: 80px;
		text-align: center;
	}

	header nav {
		display: block;
		float: none;
		height: 50px;
		text-align: center;
		margin: 0 auto;
	}

	header nav a {
		line-height: 50px;
		margin: 0 10px;
	}

	header.smaller {
		height: 75px;
	}

	header.smaller h1#logo {
		height: 40px;
		line-height: 40px;
		font-size: 30px;
     width:100%;
	}

	header.smaller nav {
		height: 35px;
	}

	header.smaller nav a {
		line-height: 35px;
	}
  footer div.col {
    width:100%;
    display:inline-block;
    vertical-align: top;
  }
  footer ul li {
    display:inline-block;
    margin:0 0.5em;
    float:left;
  }

}

@media all and (max-width: 600px) {
	.container {
		width: 100%;
	}

	footer a {
		display: block;
	}
}
</style>
</head>
<body>
  <div id="wrapper">
  <header id="js-header">
      <div class="container clearfix">
          <h1 id="logo">Apples</h1>
          <nav>
              <a href="#bacon">Bacon</a>
              <a href="#sausage">Sausage</a>
              <a href="#biltong">Biltong</a>
          </nav>
      </div>
  </header>

  <div id="main">
      <div id="content">
          <section>
              <div class="container">
                  <p>Text Here</p>
              </div>
          </section>
          <section class="color">
              <div class="container">
                  <p>Text Here</p>
              </div>
          </section>
         <section>
              <div class="container">
              <p>Text Here</p>
              </div>
          </section>
     </div>
  </div>
   <footer>
        <div class="container clearfix">
          <div class ="col" id="col-1">
            <ul>
              <li>APPLES</li>
              <li><a href="#0">Home</a></li>        
              <li><a href="#0">Services</a></li> 
              <li><a href="#0">Contact</a></li> 
              <li><a href="#0">Sitemap</a></li> 
            </ul>
          </div>
          <div  class ="col" id="col-2">
            <ul>
              <li>SOCIAL</li>
              <li><a href="#0">Facebook</a></li>      
              <li><a href="#0">Twitter</a></li> 
              <li><a href="#0">LinkedIn</a></li> 
            </ul>
          </div>
          <div  class ="col" id="col-3">
            <ul>
              <li>SERVICES</li>
              <li><a href="#0">Bacon</a></li>        
              <li><a href="#0">Sausage Services</a></li> 
              <li><a href="#0">Cheese</a></li> 
              <li><a href="#0">Cider Apples</a></li> 
            </ul>
          </div>
          <div id="copy">&#xa9; Designed and built by <a href="#">@liianakastilio</a> 2013 - 2014</div>
        </div>
  </footer>
</div>
      <script>
function resizeHeaderOnScroll() {
  const distanceY = window.pageYOffset || document.documentElement.scrollTop,
  shrinkOn = 200,
  headerEl = document.getElementById('js-header');

  if (distanceY > shrinkOn) {
    headerEl.classList.add("smaller");
  } else {
    headerEl.classList.remove("smaller");
  }
}

window.addEventListener('scroll', resizeHeaderOnScroll);
    </script>
</body>
</html>

7. By Samir alley

Made by Samir alley. Simple Responsive Header with Mega Menu. Source

JavaScript Header by Samir Alley
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
*, *:before, *:after {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}
body{background:#bdc3c7;line-height:1.5;font-family:sans-serif;text-transform:uppercase;font-size:16px;color:#fff}
a{text-decoration:none;color:#fff}
#header{background:#1E262D;width:100%;position:relative}
#header:after{content:"";clear:both;display:block}
.search{float:right;padding:30px}
input{border:none;padding:10px;border-radius:20px}
.logo{float:left;padding:26px 0 26px}
.logo a{font-size:28px;display:block;padding:0 0 0 20px}
nav{float:right;}
nav>ul{float:left;position:relative}
nav li{list-style:none;float:left}
nav .dropdown{position:relative}
nav li a{float:left;padding:35px}
nav li a:hover{background:#2C3E50}
nav li ul{display:none}
nav li:hover ul{display:inline}
nav li li{float:none}
nav .dropdown ul{position:absolute;left:0;top:100%;background:#fff;padding:20px 0;border-bottom:3px solid #34495e}
nav .dropdown li{white-space:nowrap}
nav .dropdown li a{padding:10px 35px;font-size:13px;min-width:200px}
nav .mega-dropdown{width:100%;position:absolute;top:100%;left:0;background:#fff;overflow:hidden;padding:20px 35px;border-bottom:3px solid #34495e}
nav li li a{float:none;color:#333;display:block;padding:8px 10px;border-radius:3px;font-size:13px}
nav li li a:hover{background:#bdc3c7;background:#FAFBFB}
.mega-col{width:25%;float:left}
#menu-icon{position:absolute;right:0;top:50%;margin-top:-12px;margin-right:30px;display:none}
#menu-icon span{border:2px solid #fff;width:30px;margin-bottom:5px;display:block;-webkit-transition:all .2s;transition:all .1s}
@media only screen and (max-width: 1170px) {
  nav >ul>li >a{padding:35px 15px}
}
@media only screen and (min-width: 960px) {
  nav{display:block!important}
}
@media only screen and (max-width: 959px) {
  nav{display:none;width:100%;clear:both;float:none;max-height:400px;overflow-y:scroll}
  #menu-icon{display:inline;top:45px;cursor:pointer}
  #menu-icon.active .first{transform:rotate(45deg);-webkit-transform:rotate(45deg);margin-top:10px}
  #menu-icon.active .second{transform:rotate(135deg);-webkit-transform:rotate(135deg);position:relative;top:-9px;}
  #menu-icon.active .third{display:none}
  .search{float:none}
  .search input{width:100%}
  nav{padding:10px}
  nav ul{float:none}
  nav li{float:none}
  nav ul li a{float:none;padding:8px;display:block}
  #header nav ul ul{display:block;position:static;background:none;border:none;padding:0}
  #header nav a{color:#fff;padding:8px}
  #header nav a:hover{background:#fff;color:#333;border-radius:3px}
  #header nav ul li li a:before{content:"- "}
  .mega-col{width:100%}
}
</style>
</head>
<body>
  <div id="header">
  <div class="logo">
    <a href="#">Logo</a>
  </div>  
  <nav>
    <form class="search" action="search.php"> 
      <input name="q" placeholder="Search..." type="search">
    </form>
    <ul>
      <li>
        <a href="">Home</a>
      </li>
      <li>
        <a href="">About</a>
        <ul class="mega-dropdown">
          <li class="row">
            <ul class="mega-col">
              <li><a href="#">About</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
            <ul class="mega-col">
              <li><a href="#">Help</a></li>
              <li><a href="#">Pricing</a></li>
              <li><a href="#">Team</a></li>
              <li><a href="#">Services</a></li>
            </ul>
            <ul class="mega-col">
              <li><a href="#">Coming Soon</a></li>
              <li><a href="#">404 Error</a></li>
              <li><a href="#">Search</a></li>
              <li><a href="#">Author Page</a></li>
            </ul>
            <ul class="mega-col">
              <li><a href="#">Full Width</a></li>
              <li><a href="#">Right Column</a></li>
              <li><a href="#">Left Column</a></li>
              <li><a href="#">Maintenance</a></li>
            </ul>
          </li>
        </ul>        
      </li>
      <li class="dropdown">
        <a href="">Contact</a>
          <ul>
            <li><a href="#">About Version</a></li>
            <li><a href="#">About Version</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>        
      </li>
      <li>
        <a href="">Portfolio</a>
      </li>
      <li>
        <a href="">Team</a>
      </li>
    </ul>
  </nav>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$('#header').prepend('<div id="menu-icon"><span class="first"></span><span class="second"></span><span class="third"></span></div>');

$("#menu-icon").on("click", function () {
  $("nav").slideToggle();
  $(this).toggleClass("active");
});
    </script>
</body>
</html>

8. By Blake Bowen

Made by Blake Bowen. Sticky Scroll Header. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
<style>
* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  line-height: 1.4;
}

html, body {
  height: 100%;
  min-height: 100%;
  font-family: Roboto, sans-serif;
}

main {
  padding-top: 300px;
  font-family: arial;
  background: #eee;
  min-height: 100%;
}

.app-header {
  display: block;
  background: #3f51b5;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  color: #fff;
  height: 300px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}

.header-content {
  position: relative;
  height: 100%;
  width: 100%;
}

.app-toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  height: 64px;
  padding: 0 16px;
  pointer-events: none;
  font-size: 20px;
}

#large-toolbar {
  position: absolute;
  bottom: 0;
  transform-origin: left top;
  margin-bottom: 24px;
  margin-bottom: 16px;
  width: 100%;
}

.small-title,
.large-title {
  transform-origin: left top;
  white-space: nowrap;
  flex: 1;
  flex-basis: 1e-9px;
  overflow: hidden;
  font-weight: 400;
  line-height: 1.5;
  position: relative;
}

.small-title {
  margin-left: 14px;
  opacity: 0;
}

.large-title {
  will-change: transform, opacity;
  font-size: 56px;
  font-size: 2em;
  margin-left: 64px;
}

.icon-button {
  display: inline-block;
  position: relative;
  padding: 6px;
  outline: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font-size: 0;
  line-height: 1;
  width: 40px;
  height: 40px;
  box-sizing: border-box !important;
}
.icon-button .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  vertical-align: middle;
  fill: currentcolor;
  stroke: none;
  width: 100%;
  height: 100%;
}

.background-container {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.background {
  pointer-events: none;
  position: absolute;
  background-size: cover;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  will-change: transform, opacity;
}

#background-back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/mountain-02.jpg);
  background-position: left center;
  opacity: 0;
}

#background-front {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/mountain-01.jpg);
  background-position: left center;
}

.card {
  padding: 16px;
  margin: 24px;
  border-radius: 2px;
  background-color: #fff;
  color: rgba(0, 0, 0, 0.87);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.card .card-title {
  padding: 24px 16px 8px;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
}
.card p {
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.6em;
  padding: 0 16px;
}
</style>
</head>
<body>
  <main>
  <header id="app-header" class="app-header">

    <div class="background-container">
      <div id="background-back" class="background"></div>
      <div id="background-front" class="background"></div>
    </div>

    <div class="header-content">
      <div id="small-toolbar" class="app-toolbar">

        <div class="icon-button">
          <div class="icon">
            <i class="material-icons">menu</i>            
          </div>
        </div>

        <div id="small-title" class="small-title">Some Title</div>     
        <div class="icon-button">
          <div class="icon">            
            <i class="material-icons">search</i>
          </div>
        </div>
        
        <div class="icon-button">
          <div class="icon">            
            <i class="material-icons">more_vert</i>
          </div>
        </div>

      </div>

      <div id="large-toolbar" class="app-toolbar tall">
        <div id="large-title" class="large-title">Some Title</div>
      </div>
    </div>
  </header>

  <div class="card">

    <div class="card-title">Heading</div>

    <p>Add Text</p>
  </div>
</main>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
      <script>
TweenLite.defaultEase = Linear.easeNone;

var header = document.querySelector("#app-header");
var bgBack = document.querySelector("#background-back");
var bgFront = document.querySelector("#background-front");
var toolbar = document.querySelector("#small-toolbar");
var largeTitle = document.querySelector("#large-title");
var smallTitle = document.querySelector("#small-title");

var deltaHeight = header.offsetHeight - toolbar.offsetHeight;

var rect1 = smallTitle.getBoundingClientRect();
var rect2 = largeTitle.getBoundingClientRect();

var scale = rect1.height / rect2.height;
var x = rect1.left - rect2.left;
var y = rect1.top - rect2.top;

var headerAnimation = new TimelineLite({ paused: true }).
to(largeTitle, 1, { scale: scale, x: x, y: deltaHeight + y }, 0).
to(header, 1, { y: -deltaHeight }, 0).
to(toolbar, 1, { y: deltaHeight }, 0).
to(bgBack, 1, { y: deltaHeight / 2 }, 0).
to(bgFront, 1, { y: deltaHeight / 2 }, 0).
to(bgBack, 1, { alpha: 1 }, 0).
to(bgFront, 1, { alpha: 0 }, 0).
set(smallTitle, { alpha: 1 }, 1).
set(largeTitle, { alpha: 0 }, 1);

var shadowAnimation = TweenLite.to(header, 0.4, {
  boxShadow: "0 2px 5px rgba(0,0,0,0.6)",
  ease: Power1.easeOut }).
reverse();

var progress = 0;
var requestId = null;
var reversed = true;

cloneCards(25);
update();
window.addEventListener("scroll", requestUpdate);

function requestUpdate() {
  if (!requestId) {
    requestId = requestAnimationFrame(update);
  }
}

function update() {

  var scroll = window.pageYOffset;

  if (scroll < deltaHeight) {
    progress = scroll < 0 ? 0 : scroll / deltaHeight;
    reversed = true;
  } else {
    progress = 1;
    reversed = false;
  }

  headerAnimation.progress(progress);
  shadowAnimation.reversed(reversed);

  requestId = null;
}

function cloneCards(count) {

  var main = document.querySelector("main");
  var card = document.querySelector(".card");

  for (var i = 0; i < count; i++) {
    main.appendChild(card.cloneNode(true));
  }
}
    </script>
</body>
</html>

9. By Malith Hettiarachchi

Made by Malith Hettiarachchi. Animated Fixed Header. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #cc5350;
    color:#fff;
    z-index: 1000;
    height: 200px;
    overflow: hidden;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: height 0.3s;
    text-align:center;
    line-height:160px;

}
.header.shrink {
    height: 100px;
    line-height:80px;
}
.header h1
{
    font-size:30px;
    font-weight:normal;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.header.shrink h1
{
    font-size:24px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.content
{
height:2000px;
 /*just to get the page to scroll*/
}
</style>
</head>
<body>
  <div class="header">
  <h1>Animated Fixed Header (Scroll Down)</h1>
</div>
<div class="content">
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
      <script>
$(function () {
  var shrinkHeader = 300;
  $(window).scroll(function () {
    var scroll = getCurrentScroll();
    if (scroll >= shrinkHeader) {
      $('.header').addClass('shrink');
    } else
    {
      $('.header').removeClass('shrink');
    }
  });
  function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
  }
});
    </script>
</body>
</html>

10. By Hudson Marinho

Made by Hudson Marinho. Header/Footer Parallax Effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
#scroll-animate
{
  overflow: hidden;
}

#scroll-animate-main
{
  width: 100%;
  left: 0;
  position: fixed;
}

#heightPage,
#heightScroll
{
  width: 10px;
  top: 0;
  position: absolute;
  z-index: 99;
}

#heightPage
{
  left: 0;
}

#heightScroll
{
  right: 0;
}

header
{
  width: 100%;
  height: 100%;
  background: url(https://raw.githubusercontent.com/hudsonmarinho/header-and-footer-parallax-effect/master/assets/images/bg-header.jpg) no-repeat 50% 50%;
  top: 0;
  position: fixed;
  z-index: -1;
}

footer
{
  width: 100%;
  height: 300px;
  background: gray;
  bottom: -300px;
  position: fixed;
  z-index: -1;
}

.content
{
  height: 1000px;
  min-height: 1000px;
  background: #ededed;
  position: relative;
  z-index: 1;
}

.wrapper-parallax {
  margin-top: 100%;
  margin-bottom: 300px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}

h1{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  text-align: center;
  font-family: Helvetica;
  font-size: 150px;
  color: #fff;
}

header h1{}

.content h1{
  line-height: 1000px;
  color: #999;
}

footer h1
{
  line-height: 300px;
}

header,
footer,
#scroll-animate-main
{
  -webkit-transition-property: all;
     -moz-transition-property: all;
      transition-property: all;

  -webkit-transition-duration: 0.4s;
     -moz-transition-duration: 0.4s;
      transition-duration: 0.4s;

  -webkit-transition-timing-function: cubic-bezier(0, 0, 0, 1);
     -moz-transition-timing-function: cubic-bezier(0, 0, 0, 1);
      transition-timing-function: cubic-bezier(0, 0, 0, 1);
}
</style>
</head>
<body>
  <div id="scroll-animate">
  <div id="scroll-animate-main">
    <div class="wrapper-parallax">
      <header>
        <h1>Header</h1>
      </header>

      <section class="content">
        <h1>Content</h1>
      </section>

      <footer>
        <h1>Footer</h1>
      </footer>
    </div>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
function scrollFooter(scrollY, heightFooter)
{
  console.log(scrollY);
  console.log(heightFooter);

  if (scrollY >= heightFooter)
  {
    $('footer').css({
      'bottom': '0px' });

  } else

  {
    $('footer').css({
      'bottom': '-' + heightFooter + 'px' });

  }
}

$(window).load(function () {
  var windowHeight = $(window).height(),
  footerHeight = $('footer').height(),
  heightDocument = windowHeight + $('.content').height() + $('footer').height() - 20;

  // Definindo o tamanho do elemento pra animar
  $('#scroll-animate, #scroll-animate-main').css({
    'height': heightDocument + 'px' });


  // Definindo o tamanho dos elementos header e conteΓΊdo
  $('header').css({
    'height': windowHeight + 'px',
    'line-height': windowHeight + 'px' });


  $('.wrapper-parallax').css({
    'margin-top': windowHeight + 'px' });


  scrollFooter(window.scrollY, footerHeight);

  // ao dar rolagem
  window.onscroll = function () {
    var scroll = window.scrollY;

    $('#scroll-animate-main').css({
      'top': '-' + scroll + 'px' });


    $('header').css({
      'background-position-y': 50 - scroll * 100 / heightDocument + '%' });


    scrollFooter(scroll, footerHeight);
  };
});
    </script>
</body>
</html>

11. By Sayed Rafeeq

Made by Sayed Rafeeq. Fixed Header with On Scroll Effect. Source

JavaScript Header by Sayed Rafeeq
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
.header {
    height:800px;   
}

#header-sroll {
    position:fixed;
    height: 100px;
    background:#ccc;
    left:0;
    top:0;
    float:left;
    width:100%;
    -ms-transition:     all 0.3s ease-out;
    -moz-transition:    all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition:      all 0.3s ease-out;
    transition:         all 0.3s ease-out;
}
#header-sroll h1 {
    font-size: 30px;
    font-family: Arial;
    text-align: center;
    line-height: 50px;
     -ms-transition:    all 0.3s ease-out;
    -moz-transition:    all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition:      all 0.3s ease-out;
    transition:         all 0.3s ease-out;
}
#header-sroll.small {
    height: 70px;
    line-height: 35px;
}
#header-sroll.small h1{
    height: 70px;
    line-height: 35px;
    font-size: 25px;
}
</style>
</head>
<body>
  <div class="header">
  <div id="header-sroll"> <h1>Header Scroll Effect</h1></div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(window).scroll(function () {
  var sc = $(window).scrollTop();
  if (sc > 100) {
    $("#header-sroll").addClass("small");
  } else {
    $("#header-sroll").removeClass("small");
  }
});
    </script>
</body>
</html>