<header>
  <div class="logo">
<!--     <img src="https://is1-ssl.mzstatic.com/image/thumb/Purple118/v4/2d/a0/dc/2da0dc7b-acf5-0fad-0093-0065cd89ff7b/AppIcon-1x_U007emarketing-85-220-0-6.png/246x0w.jpg" alt=""> -->
    <h1>L'atelier de James</h1>
  </div>
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Services</li>
      <li>Pricing</li>
      <li>Contact</li>
    </ul>
  </nav>
</header>
<div class="container">
  <section class="sec1">
    <h3>About</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam pariatur porro eligendi non natus magnam a velit labore dolore nisi amet reprehenderit cupiditate, molestiae eveniet eos, similique doloribus dignissimos unde.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam pariatur porro eligendi non natus magnam a velit labore dolore nisi amet reprehenderit cupiditate, molestiae eveniet eos, similique doloribus dignissimos unde.</p>
  </section>
  <section class="sec2">
    <h3>Services</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam pariatur porro eligendi non natus magnam a velit labore dolore nisi amet reprehenderit cupiditate, molestiae eveniet eos, similique doloribus dignissimos unde.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam pariatur porro eligendi non natus magnam a velit labore dolore nisi amet reprehenderit cupiditate, molestiae eveniet eos, similique doloribus dignissimos unde.</p>
  </section>
  <section class="sec3">
    <h3>Contact</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam pariatur porro eligendi non natus magnam a velit labore dolore nisi amet reprehenderit cupiditate, molestiae eveniet eos, similique doloribus dignissimos unde.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam pariatur porro eligendi non natus magnam a velit labore dolore nisi amet reprehenderit cupiditate, molestiae eveniet eos, similique doloribus dignissimos unde.</p>
  </section>
</div>

@import url('https://fonts.googleapis.com/css?family=Great+Vibes');

*{
  box-sizing: border-box;
}
header{
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  height: 100px;
  width: 100%;
  transition: .5s;
  margin-bottom: 100px;
}

.logo {
  font-family: 'Great Vibes';
  font-weight: bold;
  padding-left: 2rem;
  font-size: 2rem;
}

nav ul{
  display: flex;
  align-items: center;
}
nav ul li{
  list-style: none;
  padding: 10px 20px;
  font-size: 1.5rem;
  font-weight: bold;
  transition: .5s;
  text-transform: uppercase;
}

nav ul li:hover{
  color: #fff;
  background: orange;
  cursor: pointer;
}

.container{
  width: 80%;
  margin: 150px auto;
  
}

section p{
  padding: 50px;
}

.sec1 {
  background: url(https://source.unsplash.com/random/350x350);
  background-size: cover;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}
.sec2{
  background: url(https://source.unsplash.com/random/340x350);
  background-size: cover;
  color: #fff;
}

.sec2 h3{
  text-align: center;
  padding-top: 20px;
}

.sec3{
  background: url(https://source.unsplash.com/random/350x340);
  background-size: cover;
  color: #fff;
}

.black {
  background: rgba(0,0,0,.9);
  color:#fff;
}

header.black {
  height: 80px;
}

header.black .logo img {
  height: 60px;
  margin-top:10px;
}

$(window).on('scroll', function () {
  if($(window).scrollTop()){
    $('header').addClass('black');
  } else {
    $('header').removeClass('black');
  }
});