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개
</p>
<p><!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="<a href="http://code.jquery.com/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery.min.js"></script></a>
<script>
$(function () {
let scrolltop_before = 0;
let scrolltop_after = 0;
function fn_evt_scroll(e) {
// const wheel = e.originalEvent.wheelDelta;
const header = $("header");</p>
<p> scrolltop_after = document.documentElement.scrollTop;</p>
<p> // if (wheel > 0) {
if (scrolltop_before > scrolltop_after) {
header.removeClass("fixed");
} else {
header.addClass("fixed");
}</p>
<p> 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></p>
<p>답변에 대한 댓글 4개
scrolltop_after = document.documentElement.scrollTop;
scrolltop_before = document.documentElement.scrollTop;를 준 이유랑
scrolltop_before = document.documentElement.scrollTop;를 뒤에 선언해준게 이해가 안되네요ㅜㅜ 혹시 설명 해주실 수 있으실까요?
scrolltop_before , scrolltop_after를 0으로 선언해준건 스크롤이 천장에 붙은걸 인식시켜주기위해서 그런거죠?
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 을 지정한것도 맞습니다.
댓글을 작성하려면 로그인이 필요합니다.
</p>
<p> $(function () {
let scrolltop_before = 0;
let scrolltop_after = 0;
function fn_evt_scroll(e) {</p>
<p> const header = $("#gnb");
scrolltop_after = document.documentElement.scrollTop;</p>
<p> 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;
}</p>
<p> $(window).on("scroll", fn_evt_scroll);
});</p>
<p>답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인