Hi @eli010101 ,

Your CSS classes are not actually used. The class for the header is ".header". I tested and the following CSS and JS works:

.header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 9999;

  transition: transform 0.3s ease;

}

.header.appheader--hidden {

  transform: translateY(-100%);

}

JS:

var lastScrollTop = 0;

  var header = document.querySelector('.header');

  if (!header) return;

  var scrollEl =

       document.querySelector('.screen-container[scroll]')

    || document.querySelector('.active-screen.screen-container')

    || document.querySelector('.screen-container')

    || window;

  function getScrollTop() {

    return scrollEl === window

      ? (window.pageYOffset || document.documentElement.scrollTop)

      : scrollEl.scrollTop;

  }

  scrollEl.addEventListener('scroll', function() {

    var st = getScrollTop();

    if (st > lastScrollTop && st > 50) {

      if (!header.classList.contains('appheader--hidden')) {

        header.classList.add('appheader--hidden');

      }

    } else {

      if (header.classList.contains('appheader--hidden')) {

        header.classList.remove('appheader--hidden');

      }

    }

    lastScrollTop = Math.max(0, st);

  });

Also make sure your header is not fixed from the outsystems property: 

You can check the attached OML for reference.