<div id="user-mode-overlay" class="d-flex align-items-center justify-content-center">
  <span id="user-mode-overlay-headline">Der Usermodus ist aktiv für:</span>&nbsp;
  <span id="user-mode-overlay-username">{{username}}</span>
  <button type="button" class="btn btn-primary btn-sm" id="user-mode-overlay-disable-button">Beenden</button>
  </span>
</div>

<script>

  //insert and placement of overlay
  jQuery(document).ready(function () {

    var overlay = jQuery('#user-mode-overlay');
    jQuery('body').prepend(overlay);

    var lastScrollTop = 0;
    jQuery(window).scroll(function (event) {
      var currentScrollTop = jQuery(this).scrollTop();

      if (currentScrollTop <= 0) {
        jQuery("#user-mode-overlay").css("position", "relative");
      }
      else if (currentScrollTop > lastScrollTop) {
        jQuery("#user-mode-overlay").css("position", "fixed");
      }
      lastScrollTop = currentScrollTop;
    });
  });
</script>