JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
HEADER
</div>
<div class='conteneur'>
  <div class='premier'>
  <p>1</p>    
  </div>
  <div class='deuxieme'>
  <p>2</p>  
  </div>
  <div class='troisieme'>
    <p>3</p>    
  </div>
  <div class='cible'>CIBLE</div>
  <div class='quatrieme'>
  <p>4</p>   
  </div>
  <a class='gauche'><p>
  << 
  </p>  </a>
  <a class='droite'><p>
  >>
  </p>  </a>
  
  </div>

CSS

.header{text-align:center;height:400px;line-height: 400px;background-color:white}
.conteneur{text-align:center;padding:5em;}
.conteneur > div:not(.cible){vertical-align: middle;height:300px;line-height: 300px;}
.premier{background-color:Red;}
.deuxieme{background-color:blue;}
.troisieme{background-color:yellow;}
.quatrieme{background-color:green;}
.gauche,.droite{position:fixed;top:50%;text-align:center;vertical-align:medium;
width:50px;height:50px;
color:white;background-color:black}
.gauche{left:0;border-radius:0 25px 25px 0}
.droite{right:0;border-radius:25px 0 0 25px}
.gauche:hover,.droite:hover{cursor:pointer;background-color:blue;}

JavaScript

$(document).ready(function(){
//ici on positionne les boutons juste après le header +10
	$(".gauche,.droite").css("top",$(".header").offset().top+$(".header").height()+10);
 
  $(window).scroll(function(){
 		var fenetre=$(this), 
    scrollTop=fenetre.scrollTop(),
    scrollBottom=parseInt($(document).height() - 
    fenetre.height() -scrollTop),
 		cible=$(".cible"),
    entete=$(".header"),
    //set le Top selon le scroll de window  
 		Top=scrollTop+entete.height()+100<cible.offset().top
 			? entete.offset().top+entete.height()+10
      : cible.offset().top-fenetre.scrollTop()-100;//ici les boutons s'arrêtent a 50px du top de notre div cible
 
  $(".gauche,.droite").css('top',Top);
  
  // si le debut de la page
  if(scrollTop==0){
  console.log("debut de page");
  }
  
  //si la fin de la page
  if(scrollBottom==0){
  console.log("fin de page");
  }
        
        
  });
  
});