특정위치에서 사라지는 div

밥탱이

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2021-03-26 (금) 21:07:02 4,587

안녕하세요.

모바일에서 고정된 하단 메뉴(예)가 있고 스크롤을 내리면

지정된 특정위치에서 하단 고정메뉴가 사라지는

방식을 뭐라고 하나요?

반대로 다시 스크롤 올리면 고정메뉴가 나타나고요.

구글링에서 이것저것 검색해도 찾는 소스가

안나와서요.

특정위치에서사라지는

답변 1개 / 댓글 1개

채택된 답변

+20 포인트

besty

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2021-03-27 (토) 17:13:51

jquery 스크롤에 반응해서 발생되는 이벤트네요.

Copy

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">

  <title>Document</title>
  <style>

   .footer_m {position:fixed; bottom:0; width:100%; height:50px; padding:10px; text-align:center; background-color: #43637c; color:#ffff00;}
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
  <script>
        var prevScrollTop = 0;

        var nowScrollTop = 0;

        function wheelDelta(){
            return prevScrollTop - nowScrollTop > 0 ? 'up' : 'down';
        };

        $(window).on('scroll', function(){
            nowScrollTop = $(this).scrollTop();
                if(wheelDelta() == 'down'){
                    $('#footer_m').fadeOut();
                }
                if(wheelDelta() == 'up'){
                     $('#footer_m').fadeIn();
                }
            prevScrollTop = nowScrollTop;
        });

</script>
 </head>
 <body>
  <div id="footer_m" class="footer_m">
   내리면 사라지고 올리면 나타나는
  </div>
  <br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br>
 </body>
</html>

답변에 대한 댓글 1개

에스바이러스

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2022-04-03 (일) 08:55:59

스크롤이 시작하자마자 사라지는데 이 지점을 조절할수 없을까요?
스크롤이 거의 페이지 끝까지 이동했을때 사라지게 하고
다시 나타나는 지점도 스크롤을 어느정도 올렸을떄 다시 나타나게 하고 싶습니다

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

특정위치에서 사라지는 div

답변 1개 / 댓글 1개

답변에 대한 댓글 1개

공유하기