JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="mobile-menu-link">
        Menu =
    </div>
    <h1>lorem ipsum</h1>
    <h1>lorem ipsum</h1>
    <h1>lorem ipsum</h1>
    <h1>lorem ipsum</h1>
    <h1>lorem ipsum</h1>
    <h1>lorem ipsum</h1>
    <h1>lorem ipsum</h1>
    <h1>lorem ipsum</h1>
    <h1>lorem ipsum</h1>
    <h1>lorem ipsum</h1>
    <h1>lorem ipsum</h1>
    <h1>lorem ipsum</h1>
    <h1>lorem ipsum</h1>
    <h1>lorem ipsum</h1>
    <h1>lorem ipsum</h1>
    <h1>lorem ipsum</h1>
    <h1>lorem ipsum</h1>
    <h1>lorem ipsum</h1>
    <h1>lorem ipsum</h1>
    <h1>lorem ipsum</h1>
    <h1>lorem ipsum</h1>
    <h1>lorem ipsum</h1>
    <h1>lorem ipsum</h1>
    <h1>lorem ipsum</h1>
</body>

JavaScript

var site = {

  globalVars: {
    didScroll: false,
    scrollY: 0,
  },

  globalFuncs: {

    ifUserScrollsDoActions: function(){
      if ( site.globalVars.didScroll ) {
        site.globalVars.didScroll = false;
        site.globalVars.scrollY = window.scrollY;
        console.log(site.globalVars.scrollY);
      }
    },

  },

  topMenuElements: {
    mobileMenuLink: document.getElementById('mobile-menu-link'),
  },

};


window.onscroll = function () {  
  site.globalVars.didScroll = true;
}

setInterval(function() {
  site.globalFuncs.ifUserScrollsDoActions();
}, 250);