Code from another previous page interfering with next page

I have two pages that use the same code to remove a class when scrolling, but when I open the other page, the code doesn’t work on it, but on the previous one.

const $nav = document.querySelector(".navbar")

        $('.page-content').on('scroll', function() {

            if ($(this).scrollTop() > 1) {
                $nav.classList.remove("no-shadow");
  
            } else {
                $nav.classList.add("no-shadow");
            }

        })

Is there a way to use the same code on two or more pages without having to use id selectors?

You have two element <div class="page-content"></div> in DOM at one point in time

When you add that listener you need to specify exact page-content element, not all of them