JSFiddle - React, Tailwind, and code Playground

HTML

<progress value="0"></progress>
<div class="con">
    <section id="b2">
        <!-- Entrées -->
        <h3 class="fade">ENTRÉES</h3><br>
        <article class="plats">
            <div class="left">
                <p class="fade">MILLEFEUILLE BUFFALA</p><br>
                <p class="fade">ASSIETTE DE LÉGUMES GRILLÉS<br>
                    <em>fleur de sel de Guérande et huile d’olive d’Italie</em></p><br>
                <p class="fade">SALADE DE CALAMARS<br>
                    <em>calamar, rucola, tomates</em></p><br>
                <p class="fade">SALADE DE POULPE</p><br>
            </div>
            <div class="right">
                <p class="fade">ANTIPASTO CASA NOSTRA<br>
                    <em>foccaccia, burrata, petits légumes grillés, Vitello Tonnato, etc</em></p><br>
                <p class="fade">CARPACCIO DE BOEUF<br>
                    <em>rucola, grana padano, champignons</em></p><br>
                <p class="fade">BRESAOLA, RUCOLA ET GRANA PADANO</p><br>
                <p class="fade">RUCOLA PARMESAN</p><br>
            </div>
        </article>
    </section>

    <section id="b3">
        <!-- Pâtes -->
        <h3 class="fade">PASTA</h3><br>
        <article class="plats">
            <div class="left">
                <h4>LINGUINE</h4><br>
                <p class="fade">ALLO SCOGLIO<br>
                    <em>fruits de mer, tomates</em></p><br>
                <p class="fade">ALLE VONGOLE VERACE<br>
                    <em>vongoles, persil, ail, huile d’olive</em></p><br>
                <h4>PENNE</h4><br>
                <p class="fade">ALLA SICILLIANA<br>
                    <em>tomates, aubergines, olives noires, mozzarella</em></p><br>
                <p class="fade">ALL’ARRABIATA<br>
                    <em>tomates, piment, ail</em></p><br>
            </div>
            <div class="right">
                <h4>SPAGHETTI</h4><br>
                <p class="fade">ALLA CARBONARA<br>
                    <em>lardons, crème...

CSS

body {
    font-family: 'open sans', sans-serif;
    margin: 0;
    padding: 0;
}

h1 {
    margin: 1em auto;
    text-align: center;
}

#backup {
    position: fixed;
    bottom: 125px;
    left: 75px;
}

#backup:hover {
    cursor: pointer;
}

section {
    text-align: center;
    background-color: lightgrey;
    margin: .25em auto;
    padding: .25em;
    width: 1000px;
}

.nav {
    position: fixed;
    display: flex;
    flex-direction: column;
    left: 75px;
    top: 35vh
}

.nav a {
    text-decoration: none;
    color: black;
    font-weight: 600;
    padding: .5em 0;
}

.activeNav {
    text-decoration: underline !important;
}

progress {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 5px;
    /* Reset de l'apparence */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    /* on enlève le border par défaut de Firefox/Opera. */
    background-color: transparent;
    /* Progress bar container pour Firefox/IE10+ */
    color: red;
    /* Progress bar value pour IE10+ */
}

progress::-webkit-progress-bar {
    background-color: transparent;
}

progress::-webkit-progress-value {
    background-color: red;
}

progress::-moz-progress-bar {
    background-color: red;
}

JavaScript

var progressBar = function() {
    var myBar = document.querySelector('progress'),
        docHeight = document.body.clientHeight,
        winHeight = window.innerHeight,
        max = docHeight - winHeight,
        value = window.scrollY;
    myBar.setAttribute('max', max);
    myBar.setAttribute('value', value);
};
document.addEventListener('scroll', progressBar);
window.addEventListener('resize', progressBar);