[uiux codepen]fixHeader(스크롤하면 변하는 헤더)

See the Pen Untitled by kaia (@kaiaakim) on CodePen.

<div class="wrap">
  <header>
    <h1 class="logo">
      <a href="#" class="logo1">LOGO1</a>
      <a href="#" class="logo2">LOGO2</a>
    </h1>
  </header>
</div>

*{
  padding: 0; margin: 0;
}
a{
  color: #000; text-decoration: none;
}
.wrap{
  height: 5000px;
}
header{
  width: 100%; height: 100px;
  text-align: center;
  position: fixed; left: 0; top: 0;
  transition: all 0.5s;
  color: #fff; background: #000;
}
header .logo{
  width: 150px; 
  font-size: 24px;
}
header .logo a{
  color: #fff;
  position: absolute; 
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
header .logo a.logo2{
  opacity: 0;
}

/* on클래스가 붙은상태 */
header.on{
  height: 80px;
  transition: all 0.5s;
  border-bottom: 1px solid #000;
  background: transparent;
}
header.on a{
  color: #000;
}
header.on a.logo1{
  opacity: 0; transition: all 0.5s;
}
header.on a.logo2{
  opacity: 1; transition: all 0.5s;
}

var scrollNum = 0;
scrollNum = $(document).scrollTop(); //scrollTop의 값이 변수scrollNum에게 대입됨
fixHeader();

function fixHeader(){
  if(scrollNum > 150){ //scroll값이 150일때 실행
    $("header").addClass("on");
  }else{
    $("header").removeClass("on");
  }
}
//윈도우창 조절시에도 작동하게하는 이벤트
$(window).on('scroll resize', function(){
  scrollNum = $(document).scrollTop();
  fixHeader();
});