특정위치에서 사라지는 div

특정위치에서 사라지는 div

QA

특정위치에서 사라지는 div

본문

안녕하세요.

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

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

방식을 뭐라고 하나요?

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

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

안나와서요.

이 질문에 댓글 쓰기 :

답변 1

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

 


<!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>

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

답변을 작성하시기 전에 로그인 해주세요.
전체 123,123 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT