Change color on scroll

by Rey Den Nalasa

HTML

<!-- Please note I am using jQuery.  -->

<header class="header">
  <ul class="header-ul">
    <li>List one</li>
    <li>List two</li>
  </ul>
  <h3 class="brand">Brand</h3>
</header>

<div class="main">
</div>

CSS

body {
  margin-top: 0;
}

.header {
  position: fixed;
  right: 0;
  left: 0;
  margin: 0;
  min-height: 50px;
  padding: 10px;
  background-color: #428bca;
}

.header.scrolling {
  background-color: #5cb85c;
   -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.default
{
  background-color: #428bca;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.header .brand {
  display: inline-block;
  font-size: 16px;
}

.header-ul {
  list-style: none;
  float: right;
}

.header-ul > li {
  display: inline-block;
}

.main {
  height: 2000px;
}

JavaScript

$(window).scroll(function() {
  var scroll = $(window).scrollTop();

  if (scroll >= 100) {
    $(".header").removeClass('default').addClass('scrolling');
  } else {
    $(".header").removeClass("scrolling").addClass('default');
  }
});