<div class="box">
  <div class="banner">
    <div class="cont">バナー</div>
  </div>
</div>
.box{
  background-image:url(https://f.easyuploader.app/20210616131927_33685172.png);
  width: 100%;
  margin: 60px auto 0;
  height: 4000px;
  background-size: 100% auto;
}
.banner{
  width: 100%;
  height:60px;
  position: fixed;
  left:0;
  top:0;
  transition: 1s;
}

.banner.hide {
  transform:translateY(-60px);
}

.banner .cont{
  color:#fff;
  text-align:center;
  line-height:60px;
  background-color:red;
}
$(function(){
  var pos = 0;
  var header = $('.banner');
  
  $(window).on('scroll', function(){
    if($(this).scrollTop() < pos ){
      //上にスクロールしたとき
      header.removeClass('hide');
    }else{
      //下にスクロールしたとき
      header.addClass('hide');
    }
    pos = $(this).scrollTop();
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js