How to remove block twitching when scrolling?

Question

css

There is a block for mobile devices that opens / closes using the Toggler(Foundation) plugin. I want to make the block hidden not only by clicking on the button as it is now, but also by scrolling (or by clicking outside the block). When you start scrolling, the block twitches and is not always hidden. How to fix a bug, can select another event?
An example for visual display of twitching, the code in the project is different.
(It didn’t work to play it through the snippet)
I close the block using the plugin method

$(window).scroll(function() {
           let menuStatus = $('#js-mobile-menu').attr('aria-expanded');
           if( menuStatus === 'true') {
              $('#js-mobile-menu').foundation('toggle');
           }
  });

Example
https://codepen.io/AFI/pen/ddbqoj

Answer 1

As the wheel spins, there are many scroll events fired.

You can check

$(window).scroll(function(evt) {
  console.log(evt)
});

You need to tweak throttle/debounce so that the close will fire once.