19'C 흐림
서울 강남구
스크롤 감지를 통해서 스크롤에 따라 컨텐츠들이 생기고 사라지는 등 다양한 액션을 구현할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<meta charset="UTF-8">
<title>Smart Main</title>
<style>
*,html,body{
margin:0;padding:0;
}
.base{
width:100%;
display:flex;
justify-content:center;
background-color:dimgrey;
min-height:120vh;
}
nav{
position:fixed;
width:100%;
height:75px;
background-color:white;
opacity:0;
transition:all 0.65s;
display:flex;
}
</style>
</head>
<body>
<div class="base">
<nav>
<div class="navLeft"></div>
<div class="navCenter"></div>
<div class="navRigth"></div>
</nav>
</div>
<script>
$(".base").on("mousewheel",function(e){
var wheel = e.originalEvent.wheelDelta;
var sHeight = $(document).scrollTo();
if(wheel > 0){ //스크롤 올렸을 때
if(sHeight < 120){
$("nav").css(
'opacity','0'
);
}
} else { //스크롤 내렸을 때
if(sHeight >= 0){
$("nav").css(
'opacity','0.5'
);
}
}
});
</script>
</body>
</html>
여기서 스크립트 부분 확인해보자.
<script>
$(".base").on("mousewheel",function(e){
var wheel = e.originalEvent.wheelDelta;
var sHeight = $(document).scrollTo();
if(wheel > 0){ //스크롤 올렸을 때
if(sHeight < 120){
$("nav").css(
'opacity','0'
);
}
} else { //스크롤 내렸을 때
if(sHeight >= 0){
$("nav").css(
'opacity','0.5'
);
}
}
});
</script>
스크롤 정확히 말하면 마우스의 휠을 감지한다.
매개변수 e를 받고
e.originalEvent.wheelDelta;를 통해서 휠의 값을 가져올 수 있다.
whell이 0보다 클 경우 마우스를 올린 경우고
작으면 내린 경우다.
예제에서는 마우스 휠을 내리거나 올렸을 때 nav의 투명도를 조절했다.