* @@@ 와 회색 fixed된 상단이 접점이 아니고
@@@ 부분이 fixed상단과 만나게 될때가 진짜 접점!!
curr >= heroPos (현재스크롤>= 타겟스크롤)
if (curr (2514) > lastScroll(2515) -> 만족 x ) { $('header').addClass('hide'); } else { $('header').removeClass('hide'); -> 실행 o //curr > lastScroll 만족이 안되어서 else 실행 } lastScroll = curr; //조건비교 후에 되어야한다.
curr >= heroPos (현재스크롤>= 타겟스크롤)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
font: inherit;
color: inherit;
list-style: none;
}
header {
position: fixed;
top: 0;right: 0;
width: 80%;
height: 100px;
background: #ccc;
transition: .5s;
}
header.on {
background: #f00;
}
header.hide {
transform: translateY(-100%);
}
.box {
height: 100vh;
width: 80%;
margin: 100px auto;
background: #999;
}
.box.hero {
background: #0f0;
}
.fix {
position: fixed;
bottom: 0;
left: 0;
background: #000;
color: #fff;
padding: 40px;
font-size: 40px;
}
</style>
</head>
<body>
<header>
</header>
<main>
<div class="box">@@@</div>
<div class="box">@@@</div>
<div class="box hero">@@@</div>
<div class="box">@@@</div>
<div class="box">@@@</div>
</main>
<div class="fix">
현재스크롤: <br>
타겟(hero)스크롤:
</div>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
$(function () { //문서 로드후 실행 최후실행 1번만,,
let lastScroll = 0;//마지막 스크롤 지점
$(window).scroll(function () {
curr = $(this).scrollTop(); //내 현재 스크롤바의 위치값
heroPos = $('.hero').offset().top; //시작지점을 담고있음. 정확한값을 쓰기위해
$('.fix').html(`현재스크롤:${curr} <br> 타겟(hero)스크롤:${heroPos}`)
if (curr >= heroPos) {
$('header').addClass('on');
} else {
$('header').removeClass('on');
}
if (curr > lastScroll) {
$('header').addClass('hide');
} else {
$('header').removeClass('hide');//curr > lastScroll 만족이 안되어서 else 실행
}
lastScroll = curr;//조건비교 후에 되어야한다.
})//scrollEvent
}) //지우지 마세요.
</script>
</body>
</html>