Header Toggle

                              
<div id="wrap">
    <div id="bg"></div>
    <div class="container">
        <button type="button" class="btnHeadToggle">
            <span class="hidden">헤더 열고닫기</span>
        </button>
        <div id="header">
            <div class="inner">
                <span>header</span>
            </div>
        </div>
    </div>
</div>

                              
#wrap{
  #header{position: fixed; width: 100%; height: 65px; z-index: 1000; background-color: $_333Bg;
    .inner{display: flex; align-items: center; justify-content: center; padding: 15px; box-sizing: border-box;
        span{display: inline-block; line-height: 32px; 
        font-size: 1.25em; font-family: $d-fz; color: $cfff;}
    }
  }
  #bg{position: absolute; width: inherit; height: inherit; background-image: url("../../images/common/img-map.PNG");
  background-repeat: no-repeat; background-size: cover;}
  .btnHeadToggle{position: absolute; top: 26px; left: 50%; z-index: 990; transform: translateX(-50%); width: 70px; height: 70px; 
  border-radius: 50%; border: 1px solid rgba($color: $_222Bg, $alpha: 0.5); background-size: 22px 22px; background-color: $whiteBg; transition: .5s;
      svg{position: inherit; top: 39px; right: 21px; width: 22px; height: 22px; fill: #000;}
      &.active{top: -40px;}
  }
  #header{top: 0; transition: .5s;
      &.active{top: -65px;}
  }
}

                              
#wrap #header {
  position: fixed;
  top:0;
  transition: .5s;
  -webkit-transition: .5s;
  width: 100%;
  height: 65px;
  z-index: 1000;
  background-color: #333;
}

#wrap #header .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 15px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#wrap #header .inner span {
  display: inline-block;
  line-height: 32px;
  font-size: 1.25em;
  font-family: "Noto Sans";
  color: #fff;
}


#wrap #bg {
  position: absolute;
  width: inherit;
  height: inherit;
  background-image: url("../../images/common/img-map.PNG");
  background-repeat: no-repeat;
  background-size: cover;
}

#wrap .btnHeadToggle {
  position: absolute;
  top: 26px;
  left: 50%;
  z-index: 990;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1px solid rgba(34, 34, 34, 0.5);
  background-size: 22px 22px;
  background-color: #fff;
  -webkit-transition: .5s;
  transition: .5s;
}

#wrap .btnHeadToggle svg {
  position: inherit;
  top: 39px;
  right: 21px;
  width: 22px;
  height: 22px;
  fill: #000;
}

#wrap .btnHeadToggle.active {
  top: -40px;
}

#wrap #header.active {
  top: -65px;
}

                              
$(function () {
  $('.btnHeadToggle').on({
    "click":function (){
        $(this).toggleClass('active').siblings('.btnHeadToggle').removeClass('active');
        if(!$(this).hasClass('active')){
            $('#header').removeClass('active');
        }else if($(this).hasClass('active')){
            $('#header').addClass('active');
        }
    }
  });
});

다운로드

Esc 혹은 우측 상단 X 버튼을 눌러 결과창을 닫을 수 있습니다.