<div class="container">
  <header>
    <div class="top">
      <div class="social">
        <ul>
          <li><a class="tw-li" href="https://twitter.com/mm_manual"><i class="fa fa-twitter fa-1"></i></a></li>
          <li><a class="fb-li" href="https://www.facebook.com/marumarumanual"><i class="fa fa-facebook fa-1"></i></a></li>
          <li><a class="g-li" href="#"><i class="fa fa-google-plus fa-1"></i></a></li>
          <li><a class="rss-li" href="http://marumarumanual.net/feed/"><i class="fa fa-rss fa-1"></i></a></li>
        </ul>
      </div>
    </div>
    <div class="center clearfix">
      <div class="logo">LOGO</div>
      <form id="searchform">
        <input type="text">
        <input type="submit" value="&#xf002;">
      </form>
    </div>
    <div class="bottom">
      <nav class="clearfix">
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Contact</li>
          <li>Portfolio</li>
          <li>Download</li>
        </ul>
      </nav>
    </div>
  </header>
</div>
* {
  font-family: 'Raleway', sans-serif;
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

.container {
  background: #E8F5FB;
  height: 5000px;
  margin: 0 auto;
  overflow: hidden;
  width: 800px;
}

.top {
  background: #3A8EBF;
  padding: 10px;
}

.social li {
  display: inline-block;
}

.social a {
  background: #E8F5FB;
  ;
  border-radius: 50%;
  display: block;
  height: 20px;
  line-height: 20px;
  padding: 5px;
  text-align: center;
  width: 20px;
}

.social i {
  color: #3A8EBF;
}

.center {
  background: #E8F5FB;
  padding: 10px;
}

.logo {
  background: #5EA3CB;
  border-radius: 5px;
  color: #fff;
  float: left;
  height: 50px;
  line-height: 50px;
  text-align: center;
  width: 200px;
}

#searchform {
  float: right;
}

input[type="text"],
input[type="submit"] {
  border: none;
  border-radius: 5px;
  padding: 5px;
}

input[type="text"] {
  border: 1px solid #5EA3CB;
  width: 350px;
}

input[type="submit"] {
  background: #3A8EBF;
  color: #fff;
  font-family: FontAwesome;
  width: 50px;
}

.bottom {
  background: #3A8EBF
}

.bottom.sticky {
  opacity: 0.4;
  position: fixed;
  top: 0;
}

.bottom.sticky:hover {
  opacity: 1;
}

nav ul,
.social ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  color: #fff;
  display: inline-block;
  padding: 10px 20px;
}

nav li:nth-child(odd) {
  background: #5EA3CB;
}
$(function() {
  $('.bottom').each(function() {
    var $window = $(window),
      $header = $(this),
      headerOffset = $header.offset().top;
    $window.scroll(function() {
      if ($window.scrollTop() > headerOffset) {
        $header.addClass('sticky');
      } else {
        $header.removeClass('sticky');
      }
    });
    $window.trigger('scroll');
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js