특정위치에서 사라지는 div 채택완료
밥탱이
4년 전
조회 4,448
안녕하세요.
모바일에서 고정된 하단 메뉴(예)가 있고 스크롤을 내리면
지정된 특정위치에서 하단 고정메뉴가 사라지는
방식을 뭐라고 하나요?
반대로 다시 스크롤 올리면 고정메뉴가 나타나고요.
구글링에서 이것저것 검색해도 찾는 소스가
안나와서요.
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
4년 전
jquery 스크롤에 반응해서 발생되는 이벤트네요.
</p>
<p><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®"></p>
<p> <title>Document</title>
<style></p>
<p> .footer_m {position:fixed; bottom:0; width:100%; height:50px; padding:10px; text-align:center; background-color: #43637c; color:#ffff00;}
</style>
<script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> " target="_blank" rel="noopener noreferrer">http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </a>
<script>
var prevScrollTop = 0;</p>
<p> var nowScrollTop = 0;</p>
<p> function wheelDelta(){
return prevScrollTop - nowScrollTop > 0 ? 'up' : 'down';
};</p>
<p> $(window).on('scroll', function(){
nowScrollTop = $(this).scrollTop();
if(wheelDelta() == 'down'){
$('#footer_m').fadeOut();
}
if(wheelDelta() == 'up'){
$('#footer_m').fadeIn();
}
prevScrollTop = nowScrollTop;
});</p>
<p></script>
</head>
<body>
<div id="footer_m" class="footer_m">
내리면 사라지고 올리면 나타나는
</div>
</body>
</html></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
에스바이러스
3년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
스크롤이 거의 페이지 끝까지 이동했을때 사라지게 하고
다시 나타나는 지점도 스크롤을 어느정도 올렸을떄 다시 나타나게 하고 싶습니다