CodePen Embed - animated content 2

<body>
    <nav class="nav">
      <div class="header-image1"></div>
      <div class="header-image2 hidethis"></div>
    </nav>
    <div>
        <div class="block3">
            Block 3
        </div>
    </div>

    <!-- jQuery -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>

html {
  font-family: sans-serif;
}

.nav {
  width: 100%;
  padding: 20px;
  background: lightgray;
  position: fixed;
  z-index: 3;
  transition: all 0.4s ease;
}
.header-image1{
  background: url('http://placehold.it/80/3399FF?text=LOGO') no-repeat #fff;
  background-size: cover;
  width: 80px;
  height: 80px;
  float: left;
  transition: all 0.4s ease;
}
.header-image2{
  background: url('http://placehold.it/200x80/FF9900?text=SOME TEXT') no-repeat #fff;
  background-size: cover;
  width: 200px;
  height: 80px;
  float: left;
  transition: all 0.4s ease;
  opacity: 1;
}
.header-image1.scaled {
  height: 40px;
  width: 40px;
}
.header-image2.scaled {
  height: 40px;
  opacity: 0;
}

.block3 {
  height: 1400px;
  width: 100%;
  background: lightyellow;
  padding-top: 250px;
}

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

	if ($this.scrollTop() > 1){
		$('.nav, .header-image1, .header-image2').addClass("scaled");
	}
	else{
		$('.nav, .header-image1, .header-image2').removeClass("scaled");
	}
});

This Pen is owned by Arjen de Bruijn on CodePen.

See more by @awdebruijn on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.