스크롤 위아래
본문
스크롤이 아래로 갈때 메인메뉴를 안보이게 했다가
스크롤이 위로 움직이면 메뉴를 보이게하려고 하는데요.
플러그인같은게 있을까요?
답변 4
아래 코드 head파일에 넣어보세요. 마우스 방향에 따라 body에 scroll-up scroll-down 클래스가 붙습니다
<script src="https://cdn.jsdelivr.net/gh/phucbm/jquery-scroll-direction-plugin@2.0.0/jquery.scroll-direction.min.js"></script>
<script>
$(document).ready(function () {
$.scrollDirection.init();
})
</script>
반대아닌가요 아니 스크롤을 움직이면 메뉴가 고정되게되어야하는것아닌가요?
<script>
const menu = document.querySelector(".menu"); //감추고 싶은 메뉴의 class 또는 id 잡기
let isHidden = false;
window.addEventListener("scroll", () => {
const scrollTop = window.pageYOffset;
if (scrollTop > 100 && !isHidden) {
menu.style.display = "none";
isHidden = true;
} else if (scrollTop <= 100 && isHidden) {
menu.style.display = "block";
isHidden = false;
}
});
</script>
$(function () {
let scrolltop_before = 0;
let scrolltop_after = 0;
function fn_evt_scroll(e) {
scrolltop_after = document.documentElement.scrollTop;
if (scrolltop_before > scrolltop_after) {
$('#gnb').css({
"position": "fixed",
"top": "0",
"display": "block",
"width": "100%",
"z-index" : "10000"
});
} else {
$('#gnb').css({
"display": "block",
"position": "relative",
"z-index" : "10000"
});
}
if (scrolltop_after < 1) {
$('#gnb').css({
"display": "block",
"position": "relative",
"z-index" : "10000"
});
}
scrolltop_before = document.documentElement.scrollTop;
}
$(window).on("scroll", fn_evt_scroll);
});
답변을 작성하시기 전에 로그인 해주세요.