JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Setas -->
<div class="arrows">
  <a href="#"><div class="left"></div></a>
  <a href="#"><div class="right"></div></a>
</div>

<!-- Conteúdo -->
<div class="container">
  
  <!-- Topo -->
  <div class="row">
    <div class="col-sm-6">
      <img src="http://lorempixel.com/600/600" alt="Lorem Pixel" class="img-responsive">
    </div>
    <div class="col-sm-6">
      <h1>Topo</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam harum nihil minus 
      consequatur sapiente quidem sunt numquam ratione sit alias iure dolore ducimus quaerat nemo 
      eius culpa, consectetur ut nostrum.</p>
    </div>
  </div>
  
  <!-- Centro -->
  <div class="row">
    <div class="col-sm-12">
      <div class="conteudo"></div>
      <div class="conteudo"></div>
      <!-- Aqui somem as setas -->
      <div id="alvo" class="conteudo">
        <p>
          Aqui somem as setas.
        </p>
      </div>      
      <div class="conteudo"></div>
    </div>
  </div>
  


</div>

CSS

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

.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,
      alvoHeight = $("#alvo").height()
      setas = $(".left, .right");
      
  if ( topo > alvo + (alvoHeight / 2) ) {
  	setas.addClass("hide");
  } else {
  	setas.removeClass("hide");
  }
}

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