JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<div class="wrapp">
  <header class="nav">
    <a href="#" class="link">Купите наш товар</a>
  </header>
</div>

CSS

.wrapp {
  height: 3000px;
}
.nav {
  position: fixed;
  width: 100%;
  height: 80px;
  background-color: #084f70;
  text-align: center;
}
.link {
  display: none;
  font-weight: 500;
  line-height: 1;
  color: #FFFFFF;
  padding: 32px 0;
  text-transform: uppercase;
  text-decoration: none;
}
.link.show {
  display: inline-block;
}

JavaScript

var element = $('.link');

  window.onscroll = function() {
  		var scrollTop = $(window).scrollTop();
      var status = element.hasClass('show');
      if(scrollTop > 200) {
          if(status == 0) element.addClass('show');
      } else if(scrollTop <= 200 && status != 0) {
       		element.removeClass('show');
      }
  }