Navigation error with jQuery

Question

I’m making a site to use portfolio and decided to make a menu for navigation. I also decided to implement a Feature to change the color of li always when scrolling the scroll. It was even working, but after I reolad the page no longer worked at all. Follow the code:

HTML:

<nav id="menu-desktop">
      <ul>
        <li><a href="#home" class="mostrarAtivo">Home</a></li>
        <li><a href="#about">Sobre</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#contact">Contato</a></li>
      </ul>
    </nav>

CSS:

header nav ul li a.mostrarAtivo{
  color: white;
}

JS:

  var links = $("#menu-desktop a");

  $(window).scroll(function() {
    var topScroll = $(window).scrollTop();
    links.each(function(){
      var href = $(this).attr("href");
      var el = $(href);
      var posSection = el.offset().top;
      var hSection = el.height();

      if (posSection <= topScroll && (posSection + hSection) > topScroll) {
        links.removeClass("mostrarAtivo");
        $(this).addClass("mostrarAtivo");
      } else {
        $(this).removeClass("mostrarAtivo");
      }
    });
  });
});

Answer 1

I discovered the error. I had set a overflow-x: hidden in my css, to make disappear the horizontal scroll bar in the mobile version. Unfortunately this ended up harming the function.