向下滚动时隐藏，向上滚动时立即显示，纯CSS

Question

我已经准备好this fiddle，它使用CSS + JS达到了预期的效果， 向下滚动时会隐藏的顶部栏（例如具有默认css位置值的div），而向上滚动时将立即显示，而与当前滚动值无关。

我尝试使用纯CSS获得相同的外观，并且将“粘性”位置，flexbox，容器内的容器进行不同组合，但是没有任何结果。

使用纯CSS可以达到相同的结果吗？ 我的目标是在可能的情况下摆脱保留功能的'scroll'事件。

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>