JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

<nav>
  <ul>
    <li><a href="#accueil">Accueil</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#cv">CV</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<div id="accueil">
  Accueil
</div>

<div id="portfolio">
  portfolio
</div>

<div id="cv">
  CV
</div>

<div id="contact">
  Contact
</div>

CSS

ul{
  list-style:none;
  border: 1px solid green;
}

ul li{
  display: inline-block;
}

nav{
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 50;

}

.top{
  top: 0;
}

div{
  height: 1500px;
}

JavaScript

$(function(){

  $(window).on('scroll', function(){                       

    var portfolioPos = $('#portfolio').offset().top;     
    var windowPos = $(window).scrollTop() / .50;         

    if(windowPos > portfolioPos)                          
    {
      $('nav').addClass('top');                       
    }
    else
    {
      $('nav').removeClass('top');                    
    }
  });
});