Changing nav bar and hamburger color after scrolling on mobile?

Question

I am trying to make nav bar, links, and the hamburger change colour after scroll. So far it works well on the desktop view but under the mobile view, I can't make the hamburger change colour after scroll.

https://codepen.io/TianxuanL/pen/QWNaGKq

   $(function () {
      $(document).scroll(function () {
        var $bar = $(".bar");
        $bar.toggleClass("scrolled", $(this).scrollTop() > $bar.height());
      });
    });

.bar.scrolled .nav-link {
  background: rgb(0, 0, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</div>
        <ul>
          <li><a class="nav-link" href="#">Home</a></li>
          <li><a class="nav-link" href="#">Menu</a></li>
          <li><a class="nav-link" href="#">Reservation</a></li>
          <li><a class="nav-link" href="#">Blog</a></li>
          <li><a class="nav-link" href="#">Contact</a></li>
          <li><a class="nav-link" href="#">About</a></li>
        </ul>
        <div class="hamburger">
          <div class="bar nav-link" id="bar-1"></div>
          <div class="bar nav-link" id="bar-2"></div>
          <div class="bar nav-link" id="bar-3"></div>
        </div>