JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="area1">
  <button id="btn1">Comprar</button>
</div>
<div class="area2">
    <button id="btn2">Comprar</button>
</div>

CSS

body{
  background-color:#000;
}
.area1{
  background-color:#a00;
  height: 1000px;
}
.area2{
  background-color:#005;
  height: 1000px;
}

JavaScript

$(function(){
  var area1 = $('.area1').offset().top - $(window).height();
  var area2 = $('.area2').offset().top - $(window).height();

  $(window).scroll(function() {
    if ($(window).scrollTop() > area1) {
      $('#btn1').css('display','block');
      $('#btn2').css('display','none');
      
      //So para visualizar melhor quando o botao sai da tela
      $('.area1').css('background-color','#a00');
      $('.area2').css('background-color','#005');
    }
    if ($(window).scrollTop() > area2) {
    	$('#btn2').css('display','block');
      $('#btn1').css('display','none');
      
      //So para visualizar melhor quando o botao sai da tela
      $('.area1').css('background-color','#500');
      $('.area2').css('background-color','#00a');
    }    
  });
});