title: How to fix window scroll event listener for firefox?
body: <ul>
  <li><p>I have made a function which adds/removes classes to navigation depending upon window scroll position. <a href="https://kmanadkat.github.io/navonscroll/" rel="nofollow noreferrer">https://kmanadkat.github.io/navonscroll/</a></p></li>
  <li><p>It is working in Chrome Desktop and Mobile, but it is <strong>failing for Firefox.</strong> Surprisingly, examples i mentioned on above website are working on firefox but not the home page. </p></li>
  <li><p>I have tried a lot to findout the bug, <strong>there is no console log from window.onscroll function</strong> . I want to keep this plugin in <strong>pure Vanilla Javascript</strong> , still i tried with arrow notations to see if they fix, but they didnot work. </p></li>
  <li>Everything is <strong>working in chrome</strong>, just firefox is not able to get along with window.onscroll, </li>
  <li><p>i even tried <code>window.addEventListener("scroll", function() {});</code>, but it isn't working too, on tabs other than my website, i am able to do onscrollevents with developer tools.</p></li>
  <li><p>Here is the complete Code of plugin : </p></li>
  </ul>
  
  <pre class="lang-js prettyprint-override"><code>
  function hide_on_scroll(obj) {
    // Throw Error if input type is not object or navid is not passed
    if(typeof(obj)!=="object" || obj.nav_id===undefined){
      throw new TypeError("Argument must be an Object, also confirm NavId");
    }
  
    // Get Function Paramenters
    var nav_id                  = obj.nav_id;
    var nav_offset              = !!obj.nav_offset ? obj.nav_offset : 200;
    var nav_position            = !!obj.nav_position ? obj.nav_position : 'top';
    var hide_onscroll_mobile    = !!obj.hide_onscroll_mobile ? true : false;
    var mobile_width            = !!obj.mobile_width ? obj.mobile_width : 576;
    nav_position = nav_position.toLowerCase();
  
    // Prepare Navbar
    var navbar = document.getElementById(nav_id);
    if(navbar==undefined){throw new TypeError("Recheck Passed Navigation Id"); }
  
    var nav_height = navbar.offsetHeight;
    var navClasses = document.createElement('style');
    navClasses.type = 'text/css';
    navClasses.innerHTML = 
    '.nav-scroll-up{-webkit-transform: translateY(-'+78+'px);-ms-transform: translateY(-'+78+'px);transform: translateY(-'+78+'px);}' +
    '.nav-scroll-down{-webkit-transform: translateY('+78+'px);-ms-transform: translateY('+78+'px);transform: translateY('+78+'px);}' +
    '.nav-scroll-fixed-'+ nav_position +'{position: fixed;'+ nav_position +': 0;right: 0;left: 0;z-index: 1000;}' +
    '.nav-scroll-transition{will-change: transform; -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.5, 0, 0.25, 1);transition: -webkit-transform 0.5s cubic-bezier(0.5, 0, 0.25, 1);-o-transition: transform 0.5s cubic-bezier(0.5, 0, 0.25, 1);transition: transform 0.5s cubic-bezier(0.5, 0, 0.25, 1);transition: transform 0.5s cubic-bezier(0.5, 0, 0.25, 1), -webkit-transform 0.5s cubic-bezier(0.5, 0, 0.25, 1);}';
    document.getElementsByTagName('head')[0].appendChild(navClasses);
    navbar.classList.add('nav-scroll-transition');
    navbar.classList.add('nav-scroll-fixed-' + nav_position);
  
  
    // Set Global Variables
    var c=0;
    var currentScrollTop = 0;
    var scrollingClass = (nav_position==='top') ? 'nav-scroll-up' : 'nav-scroll-down';
    var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    // Get Current Viewport Width
    window.onresize = function(){ width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);}
    // Call Window OnScroll
    window.onscroll = function() {
      // disable Hide on scroll for mobile
      if(hide_onscroll_mobile==false &amp;&amp; width&lt;=mobile_width){
        if(navbar.classList.contains(scrollingClass)){ navbar.classList.remove(scrollingClass); }
      }
  
      // Hide On Scroll for all screen if (width &gt; mobile_width or mobile_width==true)
      else{
        var a = window.scrollY;
        currentScrollTop = a;
        if (c &lt; currentScrollTop &amp;&amp; a &gt; (2*nav_offset)) { 
          navbar.classList.add(scrollingClass); 
        }
        else if (c &gt; currentScrollTop &amp;&amp; !(a &lt;= nav_offset)) { 
          navbar.classList.remove(scrollingClass); 
        }
        c = currentScrollTop;
      }
    };
  }
  </code></pre>
  
  <ul>
  <li>How i want to call it from html, the above code is from file <code>navonscroll.js</code></li>
  </ul>
  
  <pre class="lang-html prettyprint-override"><code>  &lt;script src="navonscroll.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      hide_on_scroll({
        nav_id: 'myscrolling_nav',
        hide_onscroll_mobile : true,
        nav_offset : 10
      });
    &lt;/script&gt;
  </code></pre>
  
  <p>I hope someone could <strong>help me fix it directly on git and contribute</strong> for this opensource kind of plugin or some <strong>fix in stackoverflow would also helps.</strong></p>