header fixed

by Joe

by Joe

HTML

<header class="header" id="change-it-now">the header</header>

CSS

* {
  margin: 0;
  padding: 0
}

html {
  background: lightgray;
  height: 5000px;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0;
  z-index: 10000;
  transition: all 0.2s ease-in-out;
  height: auto;
  background-color: transparent;

  text-align: center;
  line-height: 40px;
}

.header.active {
  background: blue;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

JavaScript

var lastBg = localStorage.getItem('color');
if (lastBg) {
  $('header').css('background', lastBg);
}

$(document).scroll(function() {
  if ($(document).scrollTop() > 50) {
    localStorage.setItem('color', 'red');
    $('header').css('background', 'blue');
  }
});