scroll 이벤트 질문입니다!
본문
마우스 내릴때는 헤더를 없애고 올릴때 나타내기 위해서
$(document).on("mousewheel", function (e) {
const wheel = e.originalEvent.wheelDelta;
const header = $("header");
if (wheel > 0) {
header.removeClass("fixed");
} else {
header.addClass("fixed");
}
});
이렇게 코드를 줬는데요 이 이벤트는 잘 먹히는데
top button을 눌려 scroll의 위치를 0으로 했을때 헤더가 나타나지 않습니다
if (scrollTop >= 0) {
header.removeClass('fixed'); css: header {top:0;} header.fixed {top:-100%;}
} 를 줘도 안나타나네요ㅜㅜ 마우스 내리다가 top button누르면 안나타나네요 반드시 마우스를 위로 올려야만 나타납니다 어떻게 하면 좋을까요?!
답변 3
<!DOCTYPE html>
<html>
<head>
<style>
.navi {
background-color: #000;
color: #fff;
position: fixed;
top: 0;
width: 100%;
}
.fixed {
top: -100%;
}
.wrap {
height: 1024px;
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function () {
let scrolltop_before = 0;
let scrolltop_after = 0;
function fn_evt_scroll(e) {
// const wheel = e.originalEvent.wheelDelta;
const header = $("header");
scrolltop_after = document.documentElement.scrollTop;
// if (wheel > 0) {
if (scrolltop_before > scrolltop_after) {
header.removeClass("fixed");
} else {
header.addClass("fixed");
}
scrolltop_before = document.documentElement.scrollTop;
}
// $(document).on("mousewheel", fn_evt_scroll);
$(window).on("scroll", fn_evt_scroll);
});
</script>
</head>
<body>
<header class="navi">
<nav>
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
</nav>
</header>
<div class="wrap"></div>
<div>123<a href="#">top</a></div>
</body>
</html>
감사합니다....!!ㅜㅜㅜㅜㅜ
아무리 봐도
scrolltop_after = document.documentElement.scrollTop;
scrolltop_before = document.documentElement.scrollTop;를 준 이유랑
scrolltop_before = document.documentElement.scrollTop;를 뒤에 선언해준게 이해가 안되네요ㅜㅜ 혹시 설명 해주실 수 있으실까요?
scrolltop_before , scrolltop_after를 0으로 선언해준건 스크롤이 천장에 붙은걸 인식시켜주기위해서 그런거죠?
scrolltop_after : 스크롤 동작을 마친 직후의 값
scrolltop_before : 직전 함수 싸이클에서 구했던 마지막 스크롤 값 (직전 함수 싸이클의 scrolltop_after)
결국 fn_evt_scroll 함수 마지막 라인 위치에서 scrolltop_after, scrolltop_before 의 값은 같아지지만
따로따로 나눠서 보면
함수 들어갈때 scrolltop_after 업데이트
방향 판별에 의한 로직 동작 (scrolltop_before != scrolltop_after)
함수 나갈때 scrolltop_before 업데이트 (scrolltop_before == scrolltop_after)
css 속성적용 로직을 after, before 값을 할당하는 부분 사이에 위치시켜
방향 추출 판별이 가능하게 합니다.
scrolltop_before, scrolltop_after 0 부분은 그냥 초기값 지정입니다.
그리고 말씀하신것처럼 문서가 처음 보여질때 스크롤이 가장 최상단에 있을 상황을 위해 0 을 지정한것도 맞습니다.
친절한 설명 감사합니다
$(window).on('scroll', function() {
let header = $("header");
if ($(window).scrollTop() > 50) {
header.addClass("fixed");
} else {
header.removeClass("fixed");
}
});
감사합니당!!!!!!
$(function () {
let scrolltop_before = 0;
let scrolltop_after = 0;
function fn_evt_scroll(e) {
const header = $("#gnb");
scrolltop_after = document.documentElement.scrollTop;
if (scrolltop_before > scrolltop_after) {
$('#gnb').css({
"position": "fixed",
"top": "0",
"display": "block",
"width": "100%",
"z-index" : "10000"
});
$('#wrapper').css({
"padding-top":"30px"
});
} else {
$('#gnb').css({
"display": "block",
"position": "relative",
"z-index" : "10000"
});
$('#wrapper').css({
"padding-top":"30px"
});
}
if (scrolltop_after < 1) {
$('#gnb').css({
"display": "block",
"position": "relative",
"z-index" : "10000"
});
}
scrolltop_before = document.documentElement.scrollTop;
}
$(window).on("scroll", fn_evt_scroll);
});
감사합니다 !!!!