Drupal : Sticky navigation with debounce

drupal_sticky_nav_with_debounce.md

In yourtheme.libraries.yml

global:
  js:
    dist/js/global.js: { minified: true }
  dependencies:
    - core/drupal
    - core/drupal.debounce

In your global.js script

(function(Drupal, debounce) {

  Drupal.stickyNavigation = function(element) {
    const scrollChange = debounce(function() {
      const offset = 1;
      // Get the current scroll position
      var scroll = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
      if(scroll >= offset) {
        element.classList.add('sticky')
      }
      else {
        element.classList.remove('sticky');
      }
    }, 50);
    window.addEventListener('scroll', scrollChange, false);
  };

  Drupal.behaviors.yourtheme = {
    attach: function (context, settings) {

      // Sticky Navigation
      const navigation = document.querySelector('.layout-navigation');
      Drupal.stickyNavigation(navigation);

    }
  };

})(Drupal, Drupal.debounce);