Sticky navigation menu in pure JS, how to make?

Question

JavaScript

How will the pure JS version of the script look like?
There are many options on the Internet, but they do not work in all browsers and also do not work with other scripts nearby ....

Now on JQuery, the code with markup looks like this:

<nav id="menu" class="default">
<div class="menu_list">
 ...
</div>
</nav>

$(function(){
  var menu = $("#menu");
  $(window).scroll(function(){
    if($(this).scrollTop() > 150 && menu.hasClass("default")){
      menu.removeClass("default").addClass("fixed");
    }
    else if($(this).scrollTop() <= 150 && menu.hasClass("fixed")){
      menu.removeClass("fixed").addClass("default");
    }
  });
});

Answer 1

document.addEventListener("DOMContentLoaded", onDOMReady);

function onDOMReady() {
  window.addEventListener('scroll', onWindowScroll)

  var menu = document.getElementById('menu');

  function onWindowScroll() {
    if(window.document.scrollingElement.scrollTop > 150){
      menu.classList.add("fixed");
    }
    else { 
      menu.classList.remove("fixed")
    }
  }
}

Document Load Events
Document.scrollingElement