OnScroll function in JS

Question

I’m putting this code in a separate script from HTML, but it doesn’t work 100%. When I create the tag <scrip></script> within the HTML it works, someone can explain me the reason?

filing cabinet .js

scrollFunction = function () {
var navbar = document.getElementById("myNavbar");
var sticky = navbar.offsetTop;

var x = window.matchMedia("(max-width: 600px)")

   if (x.matches) { 
    
        if (window.pageYOffset >= sticky) {
            navbar.classList.add("sticky")
        } else if (window.pageYOffset < sticky){
            navbar.classList.remove("sticky");
        }  
    } else {
     
        if (window.pageYOffset > sticky) {
            navbar.classList.add("sticky")
        } else if (window.pageYOffset < sticky) {
            navbar.classList.remove("sticky");
        }  
    }
};

Same goes for that code underneath mine onClick.

tstar = function() {
var sticky;
  var x = document.getElementById("myNavbar");
  if (x.className === "navbar sticky") {
    x.className += " responsive";
  }else if (x.className === "navbar sticky responsive") {
    x.className = "navbar sticky";
  }
  else if (x.className === "navbar"){
    x.className += " responsive";
  } 
  else {
    x.className = "navbar";
  }
};