특정위치에서 사라지는 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>
스크롤이 시작하자마자 사라지는데 이 지점을 조절할수 없을까요?
스크롤이 거의 페이지 끝까지 이동했을때 사라지게 하고
다시 나타나는 지점도 스크롤을 어느정도 올렸을떄 다시 나타나게 하고 싶습니다
답변을 작성하시기 전에 로그인 해주세요.