오늘은 scroll에 따라 상단을 숨기는 법을 알아보겠습니다!
일단 기본적으로 (배경, 상단)을 만들어주고
jquery 를 적용하러 가볼게요!
가장먼저
아래와 같이 (배경,상단)을 만듭니다
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{margin:0;padding:0;}
.cont{background:black;height:2000px;}
.header{background:white;height:60px;width:100%;position:fixed;
transition: top 0.2s ease-in-out;}
</style>
</head>
<body>
<div class="cont">
<div class="header" id="header">
카테고리 부분
</div>
</div>
</body>
이제 jqeury 를 닫는 태그 </body> 앞에 넣어주세요
자세한 내용은 주석에 포함하였습니다
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var didScroll;//스크롤 여부 체크
var st=100;//기본 스크롤 높이 변수값, 100으로 주고 스크롤 움직일 시에 변화로 처리되게 함
var scrollTop;//이전 scrollTop 높이
$(function(){
$(window).scroll(function(event){ //scroll 이벤트 발생시에 true 로 처리
didScroll = true;
});
setInterval(function(){ //250 마다 스크롤 여부 체크 해서 true 이면 움직임 함수 실행
if(didScroll){
hasScrolled();
didScroll = false;
}
},250);
});
function hasScrolled(){
st = $(window).scrollTop(); //현재 스크롤 높이값
if(st<60) //상단으로 올라왔다면?
{
if(scrollTop>=60)//이전엔 60보다 컸지만 이제 상태가 변화한거라면
fadeIn();//그때 실행한다/ 무조건 60보다 작을때 계속 fadeIn 시키면 중복해서 함수가 여러번 실행되고 있을것이므로
}
else{
if(scrollTop<60)//이전엔 60보다 작았지만 이제 상태가 변화한거라면
fadeOut();
}
scrollTop = st;//현재 높이값을 다른 변수 scrollTop 에 저장하고 나중에 다음 스크롤 이벤트 시에 활용하여/ 상태변화 체크에 쓴다
}
function fadeIn(){
$( "#header" ).animate({ // 0.3초 에 걸려서 opacity 1로 변환
opacity: 1,
}, 300, function() {
});
}
function fadeOut(){
$( "#header" ).animate({ //0.3 초 에 걸려서 opacity 0.3으로 변환
opacity: 0.3,
}, 300, function() {
});
}
</script>
test3.zip'프로그래밍 > html&css' 카테고리의 다른 글
| position absolute 가운데 정렬 (0) | 2018.06.07 |
|---|---|
| html태그#총정리 (0) | 2018.04.27 |
| css적용방법 3가지 #html (0) | 2018.04.27 |
| html div 태그 총정리 (0) | 2018.04.27 |
| css적용하기#id#class (0) | 2018.04.27 |
