0

I am triggering a click event on scroll in order to collapse and expand a header menu at the top of my page. I have added throttling to my js in order to remove a glitch that was being caused by excess events firing.

Here is my current JS:

<script>
jQuery(window).scroll(function() {
   var hT = jQuery('.closemenu').offset().top,
       hH = jQuery('.closemenu').outerHeight(),
       wH = jQuery(window).height(),
       wS = jQuery(this).scrollTop();
    console.log((hT-wH) , wS);
   if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
   jQuery('.menu-bar').trigger('click');
   }

function throttle(fn, threshhold, scope) {
  threshhold || (threshhold = 1250);
  var last,
      deferTimer;
  return function () {
    var context = scope || this;

    var now = +new Date,
        args = arguments;
    if (last && now < last + threshhold) {
      // hold on to it
      clearTimeout(deferTimer);
      deferTimer = setTimeout(function () {
        last = now;
        fn.apply(context, args);
      }, threshhold);
    } else {
      last = now;
      fn.apply(context, args);
    }
  };
}

});
</script>

Now I've realised that I need to add another parameter in order to delay the event from firing by 1000ms but only on scroll up. This is because the header menu container hasn't expanded when the event fires so there is a glitch that exists on scroll up only.

Can anyone recommend the correct function to capture only scroll up actions and apply a delay of 1000ms before the event (jQuery('.menu-bar').trigger('click');) fires?

  • Check this out https://stackoverflow.com/questions/31223341/detecting-scroll-direction – ddinchev Mar 15 '18 at 03:52
  • @ddinchev thanks for the link! I might be able to make this work :) will post any results –  Mar 15 '18 at 03:57

0 Answers0