JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="main">
  <div id='navigation'>
    Lien1 - Lien2 - Lien3
  </div>
 
  <div class="content">du contenu pour pouvoir scroller</div>
</div>

CSS

.main {
  height: 100vh;
  position: relative;
}

#navigation{
  position: absolute;
  bottom: 0;
 background: #777777;
 background-image:URL("bgfooter.jpg");
 height: 80px;
 width: 100%;
 }

.fixNavigation{
 z-index: 9999;
 height:50px;
 position: fixed !important;
 top: 0;
 /* Mise en forme */
 width: 900px; /* <-- Largeur de votre site */
 }
 
 .content {
   height: 2000px;
 }

JavaScript

$(function(){
 // On recupere la position du bloc par rapport au haut du site
 var position_top_raccourci = $("#navigation").offset().top;
 
 //Au scroll dans la fenetre on déclenche la fonction
 $(window).scroll(function () {
 
 //si on a defile de plus de 150px du haut vers le bas
 if ($(this).scrollTop() > position_top_raccourci) {
 
 //on ajoute la classe "fixNavigation" a <div id="navigation">
 $('#navigation').addClass("fixNavigation"); 
 } else {
 
 //sinon on retire la classe "fixNavigation" a <div id="navigation">
 $('#navigation').removeClass("fixNavigation");
 }
 });
 });