Cacher is the code snippet organizer for pro developers

var nav_height = $('#masthead').outerHeight();
    
    $(".navbar li a").click(function (event) {
        event.preventDefault();

        var link = $(this).attr('href');
        var top = $(link).offset().top - nav_height + 60;
        var speed = Math.abs($(window).scrollTop() - top); /* Si on veut que le scroll ait la même vitesse peu importe la distance */

        $('html, body').animate({ scrollTop: top }, speed);
    });

    var sections = $('section');
    var nav = $('.navbar');

    $(window).on('scroll', function () {
        if ($(window).scrollTop() > 500) {
            nav.addClass('show');
        } else {
            nav.removeClass('show');
        }

        var cur_pos = $(this).scrollTop();

        sections.each(function () {
            var top = $(this).offset().top - nav_height + 50,
                bottom = top + $(this).outerHeight();

            if (cur_pos >= top && cur_pos <= bottom) {
                $('.current_ssmenu').removeClass('current_ssmenu');
                nav.find('a[href="#' + $(this).attr('id') + '"]').addClass('current_ssmenu');
            }

        });
    });

 <ul class="navbar">
      <li><a href="#section1"><?= pll__("Découvrir") ?></a></li>
      <li><a href="#section2"><?= pll__("Comment ça fontionne ?") ?></a></li>
      <li><a href="#section3"><?= pll__("Avantages") ?></a></li>
      <img src="<?= get_template_directory_uri(); ?>/img/navbar_bg.png" alt="">       
</ul>

<section id="section1">
    <h2>Découvrir</h2>
</section>

<section id="section2">
    <h2>Comment ça fontionne ?</h2>
</section>

<section id="section3">
    <h2>Avantages</h2>
</section>