SIR
목록으로
이전글 다음글

스크롤 위아래 채택완료

애애뜰
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전 조회 990
답변 4
목록

스크롤이 아래로 갈때 메인메뉴를 안보이게 했다가

스크롤이 위로 움직이면 메뉴를 보이게하려고 하는데요.

플러그인같은게 있을까요? 

#스크롤방향

답변 4개

채택된 답변
+20 포인트

아래 코드 head파일에 넣어보세요. 마우스 방향에 따라 body에 scroll-up scroll-down 클래스가 붙습니다

Copy 
<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>
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

Copy 
$(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);
});
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

Copy 
<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>
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

반대아닌가요 아니 스크롤을 움직이면 메뉴가 고정되게되어야하는것아닌가요?

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고