<div class="header">
  <a href="https://get-web.site" target="_blank">https://get-web.site</a>
</div>
<div class="content">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</div>
body {
	margin:0;
}
.header {
	height:200px;
	background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  transition: 1s all;
  position:fixed;
  width:100%;
}
.fixed {
	height:100px;
	position:fixed;
	background:green;
}
.content {
  padding-top: 200px;
	min-height:5000px;
	background:blue;
}

li {
  background-color: red;
  margin: 0 0 200px 0;
}
$(window).on("scroll", function() {
  // Если высота больше 200px 
  // Добавляем классу header класс fixed
    if ($(window).scrollTop() > 200) $('.header').addClass('fixed');
  // Иначе удаляем класс fixed
          else $('.header').removeClass('fixed');
    });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js