JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapp">
  <header class="nav"></header>
</div>

CSS

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

JavaScript

var element = document.getElementsByClassName('nav')[0];
  var link = document.createElement("a");
  var linkText = document.createTextNode("Купите наш товар");
	link.className = "link";
  link.appendChild(linkText);
  link.setAttribute("href", "#");
  window.onscroll = function() {
  		var scrollTop = window.scrollY;
      var status = document.getElementsByClassName('link').length;
      if(scrollTop > 200) {
          if(status == 0) element.appendChild(link);
      } else if(scrollTop <= 200 && status != 0) {
       		element.removeChild(link);
      }
  }