Скрыть при прокрутке вниз, сразу показать при прокрутке вверх, чистый CSS

Question

Я подготовил эту скрипку , она использует css + js для достижения желаемого эффекта, верхнюю полосу, которая скрывается при прокрутке вниз (как div со значением позиции css по умолчанию), а затем сразу показываетвверх при прокрутке вверх, независимо от текущего значения прокрутки.

Я пытался получить тот же внешний вид, используя чистый CSS, с различными комбинациями «закрепленного» положения, flexbox, контейнеров внутри контейнеров, но безрезультатно.

Можно ли добиться того же результата с чистым CSS?Моя цель - по возможности избавиться от события «прокрутка», сохранив функциональность.

var senseSpeed = 5;
var previousScroll = 0;
$(window).scroll(function(event){
   var scroller = $(this).scrollTop();
   if (scroller-senseSpeed > previousScroll){
      $(".item").slideUp();
   } else if (scroller+senseSpeed < previousScroll) {
      $(".item").slideDown();
   }
   previousScroll = scroller;
});

body {
  margin: 0px;
  padding: 0px;
  height: 5000px;
}

header {
  width: 100%;
  height: 50px;
  position: sticky;
  position: -webkit-sticky;
  background: DeepSkyBlue;
  top: 0;
  z-index: 999;
}

.item {
    position:fixed;
    top:50px;
    right:0;
    background-color: Orchid;
    width: 100%;
    height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>Name</header>
<div class="item"></div>
<p>some content</p>
<p>some content</p>
<p>some content</p>