JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-fluid">
<div class="row">		

<div class="col-md-2">
 
</div>
 
<div class="col-md-10">
 <div class="arrows">
    <a href='#'><div class='left'></div></a>";	
    <a href='#'><div class='right'></div></a>";
 </div>
 <article> 	
 		<div class="col-md-12" style="text-align:center">
			
		</div>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dictum tincidunt nisi. Vestibulum mattis eros eget blandit sodales. Ut ultrices, nisi eu tempor pellentesque, sapien sapien tincidunt lectus, non scelerisque tortor turpis sit amet lectus. Fusce eget laoreet enim, in maximus tellus. Cras suscipit risus sed elit feugiat ullamcorper. Aliquam erat volutpat. Integer vehicula ultrices augue, non faucibus est ultrices eget. Nulla dui turpis, vestibulum ut placerat in, iaculis sit amet sapien. Etiam sem quam, commodo accumsan nisi eu, scelerisque accumsan ante. Vestibulum eleifend congue ligula at vehicula. Cras nulla nulla, congue eu enim nec, vestibulum eleifend nisl. Proin quam odio, laoreet in facilisis id, condimentum ac nisi.

Donec vitae commodo dolor. Sed sagittis libero eu elit pretium rhoncus. Curabitur dignissim condimentum venenatis. Aenean sem nisi, egestas ut congue et, cursus id leo. Duis semper lacus at lacus porttitor, vel semper nibh efficitur. Suspendisse enim sapien, blandit at faucibus nec, pellentesque et purus. Proin tristique libero lectus, nec placerat justo mollis vitae. In non tortor consequat, consequat leo suscipit, porta nulla. Phasellus tincidunt varius sem non vehicula. Suspendisse et efficitur nulla, a rhoncus tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi nibh est, semper non nunc in, commodo fringilla sapien. Sed eget efficitur dui, vel faucibus sapien. Praesent sit amet velit gravida, volutpat augue eget, hendrerit dolor.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam eros nibh, fringilla ac massa quis,...

CSS

/* Setas */
.arrows {
  position: fixed;
  width: 80%;
  padding: 10px;
  z-index: 9999;
  top: 10%;
}

.left, .right {
  position: absolute;
  width: 0px;
  height: 0px;
  border: 15px solid transparent;
}

.left { border-right-color: red; left: 10px; }
.right { border-left-color: blue; right: 10px; }

/* Preenchimento de conteúdo para Scroll / Desnecessário */
.conteudo {
  width: 100%;
  height: 500px;
  margin-top: 20px;
}
  .conteudo:nth-of-type(1) { background: #FFCB00; }
  .conteudo:nth-of-type(2) { background: #FF9500; }
  .conteudo:nth-of-type(3) { background: #E66000; }
  .conteudo:nth-of-type(4) { background: #002147; }
  
  .conteudo p {
    text-align: center;
    position: relative;
    top: 50%;
    color: white;
  }
  
.hide {
  opacity: 0 !important;
  -ms-filter: alpha(opacity=0);
  filter: alpha(opacity=0);
  cursor: default;
  pointer-events: none;
}

JavaScript

function removerSetas() {
	var topo = $(window).scrollTop(),
  		alvo = $("#alvo").offset().top,
      setas = $(".left, .right");
      
  if ( topo > alvo ) {
  	setas.addClass("hide");
  } else {
  	setas.removeClass("hide");
  }
}

$(function() {
	$(window).scroll(removerSetas);
  removerSetas();
});