묻고답하기
스크롤 내릴때는 탑버튼이 사라지게 하려면
2015.01.29 23:45
탑버튼의 css가
.btTop {display: block; position: fixed; right: 5px; bottom: 55px; width: 38px; height: 38px; background-color: #000; background-repeat: no-repeat; background-position: center center; opacity: 0.3; text-indent: -9999px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; z-index: 150;}
이거고 레이아웃에 아래처럼 정의되어있는데요.
<a href="#" class="btTop" id="btTop" cond="!$member_config">back to top</a>
모바일에서 스크롤을 내리는 중에는 이 탑버튼을 숨기고 싶습니다.
그렇게 되어있는 사이트들이 되게 많더라구요.
이 기능 구현하기 어렵나요???
간단한 소스 추가로 가능하다면 알려주시면 감사하겠습니다 ^^
댓글 11
-
DingGGu
2015.01.29 23:46
-
Kxo
2015.01.30 01:37
... 그건 그냥 탑버튼을 없애는 거잖아요 ㅠㅠ
-
mindpainter
2015.01.30 15:16
해당 js 파일의
jQuery(function($){ 다음줄에..
$(window).scroll(function () {
if($(window).scrollTop() == 0) {
$('.btTop').show();
} else {
$('.btTop').hide();
}
});해당 js파일이 없거나 못찾겠으면 레이아웃의 상단에
<script>jQuery(function($){
$(window).scroll(function () {
if($(window).scrollTop() == 0) {
$('.btTop').show();
} else {
$('.btTop').hide();
}
});});
</script>
하지만 보통 탑 버튼은 처음엔 안보이고 스크롤을 하면 나타나게 되지 않나요?
이렇게 할땐 css의 display: block을 display: none으로 바꾸시고, java script의 show(), hide()를 바꿔주시면 됩니다. -
Kxo
2015.01.30 23:26
우선 답변 정말 감사합니다!!
그런데 해당 소스는 스크롤이 꼭대기에 있을 때만 반응하는 소스네요 ㅠㅠ
제가 원하는건 스크롤을 '움직'일때는 버튼이 사라지고 멈춰있을 때는 버튼이 나타나게 하는 것입니다 ㅠㅠ
-
mindpainter
2015.02.02 10:13
https://gist.github.com/RubaXa/5569075
js 파일 다운 받으셔서 연결 하시고
jQuery(function($){$(window).bind('scrollstart scrollend', function (evt){
if( evt.type == 'scrollstart' ){
$(".btTop").fadeOut("fast");
}
if( evt.type == 'scrollend' ){
$(".btTop").fadeIn("slow");
}
});
}); -
Kxo
2015.02.03 12:54
정말 감사합니다 ^^
그런데 js 파일 연결은 어떻게 해야하나요~?
-
mindpainter
2015.02.03 13:04
음.. 이런걸 물어보시면.. ㅜㅜ
레이아웃상단에..
<load target="js파일의 경로/파일.js" /> 추가요..
가능하실까요? ^^;; -
Kxo
2015.02.03 21:23
우와! 잘되네요 ^^
정말정말 감사합니다 ㅠㅠ!!
그런데 스크롤을 내리다가 손을 떼면 바로 페이드인이 돼버려서
모바일이라 그런지 스크롤을 내리던 도중에도 자꾸만 탑버튼이 뜨더라구요...
혹시 페이드인에 딜레이를 주는 법은 없을까요!?
자꾸 귀찮게해서 죄송합니다 ㅠㅠ
-
mindpainter
2015.02.04 11:09
$(".btTop").fadeIn("slow");을
$(".btTop").delay(1000).fadeIn("slow");으로..
delay(1000)의 숫자는 숫자/1000초, 즉 1000/1000=1초..
500이면 0.5초, 2000이면 2초..적당하게 조절하시면 됩니다~
-
Kxo
2015.02.06 20:28
$(window).bind('scrollstart scrollend', function (evt){
if( evt.type == 'scrollstart' ){
$(".btTop").fadeOut("fast");
}if( evt.type == 'scrollend' ){
$(".btTop").delay(3000).fadeIn("slow");
}
});이렇게 설정해줬는데 딜레이가 잘 동작하기는 합니다!
그런데 자꾸만 fadein이 두번씩 작동되네요.
예를들면 스크롤을 내리다가 떼면 탑버튼이 3초 뒤에 fadein 됩니다.
그런데 바로 다시 탑버튼이 사라지고 다시 3초 뒤에 fadein 되네요...
-
mindpainter
2015.02.07 13:17
첨부파일 확인해 보시길..
크로스 브라우징 체크 다 해봤구요..
다른 문제가 있는것 같네요..
크롬의 F12 등 개발자 도구를 이용하여 해당소스의 위치와 줄을 찾은 뒤 삭제하시면 사라집니다