<div class="container">
  <div class="banner-wrapper">
    <div class="banner">
      <div class="top">
        <div class="logo">DemoPage</div>
        <div class="right-top">
          <a href="#">Sign in/Sign up</a>
        </div>
      </div>
      <div class="nav">
        <ul class="menu">
          <li><a href="">Home</a></li>
          <li><a href="">Services</a></li>
          <li><a href="">Contact</a></li>
          <li><a href="">Docs</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="content">
    <div class="text">
      <p>Lorem Ipsum</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
      <p>Maecenas vehicula diam at orci mattis accumsan</p>
      <p>Quisque eget porttitor risus</p>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Roboto Slab', serif;
  min-width: 750px;
}

.container {
  width: 100%;
}

.banner-wrapper {
  z-index: 4;
  transition: all 300ms ease-in-out;
  position: fixed;
  width: 100%;
}

.banner {
  width: 100%;
  height: 77px;
  padding-left: 10px;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: rgba(162, 197, 35, 1);
  transition: all 300ms ease-in-out;
}

.content {
  background: url(https://unsplash.it/1400/1400?image=699) center no-repeat;
  background-size: cover;
  padding-top: 100%;
}

.top {
  display: flex;
  justify-content: space-between;
}

.logo {
  font-size: 25px;
  color: white;
}

.right-top {
  text-transform: none;
  padding-right: 10px;
  font-size: 14px;
}

.nav {
  width: 100%;
  height: auto;
}

.nav ul.menu {
  height: inherit;
  list-style-type: none;
  display: flex;
  align-items: center;
  width: 50%;
  font-size: 14px;
}

.nav ul.menu li {
  flex: 1 1 auto;
  height: inherit;
  display: flex;
  align-items: center;
}

.nav ul.menu li a, .left-top a {
  text-decoration: none;
  color: black;
}

.nav ul.menu li a:hover, .left-top a:hover {
  color: rgba(0, 0, 0, 0.5);
}

.text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: rgba(255, 255, 255, 0.9);
  top: 50%;
  position: absolute;
  width: 100%
}

.text p:first-child {
  font-size: 45px !important;
}

.text p {
  font-size: 22px;
}

.animateIn{
  transform: translateY(0px);
}

.animateOut{
  transform: translateY(-100%);
}

@media screen and (max-width: 800px) {
  .text p:first-child {
    font-size: 40px;
  }
  .text p {
    font-size: 17px;
  }
  .nav ul.menu {
    font-size: 12px;
  }
}
(() => {
  'use strict';

  let refOffset = 0;
  const bannerHeight = 77;
  const bannerWrapper = document.querySelector('.banner-wrapper');
  const banner = document.querySelector('.banner');

  const handler = () => {
    const newOffset = window.scrollY || window.pageYOffset;

    if (newOffset > bannerHeight) {
      if (newOffset > refOffset) {
        bannerWrapper.classList.remove('animateIn');
        bannerWrapper.classList.add('animateOut');
      } else {
        bannerWrapper.classList.remove('animateOut');
        bannerWrapper.classList.add('animateIn');
      }
      banner.style.background = 'rgba(162, 197, 35, 0.6)';
      refOffset = newOffset;
    } else {
      banner.style.backgroundColor = 'rgba(162, 197, 35, 1)';
    }
  };

  window.addEventListener('scroll', handler, false);
})();
  
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.