묻고답하기
스크롤 내릴때는 탑버튼이 사라지게 하려면
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
첨부파일 확인해 보시길..
크로스 브라우징 체크 다 해봤구요..
다른 문제가 있는것 같네요..
글쓴이 | 제목 | 최종 글 |
---|---|---|
XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
세상의모든계산기 |
지식인 모듈에서 확장 컴포넌트 선택이 3개까지만 됩니다.
[1]
![]() | 2015.02.07 by 세상의모든계산기 |
saramjh | 첨부파일로 사진을 올릴경우 회전 [3] | 2015.02.07 by 퍼니엑스이 |
HelloXXX | xe업데이트와 동영상 문의 | |
프로개미 | 레이아웃이 안 읽힙니다.;; | |
saramjh | 게시판 사용자정의를 이용할때 관리자만 보이게 [5] | 2015.02.07 by mindpainter |
Kxo | 스크롤 내릴때는 탑버튼이 사라지게 하려면 [11] | 2015.02.07 by mindpainter |
친절뺀질이 | XE설치문의 [1] | 2015.02.07 by 업글 |
아형여옹 | 댓글 달리면 오른쪽 하단 창에 알림 표시 뜨는것 어떻게 하나요? [2] | 2015.02.07 by 아형여옹 |
karutian | 1.7.7.2 에서 1.7.10 으로 업데이트시 오류발생 | |
따라쟁이2 |
이거 명칭이 무엇인가요? 그림 참조
[6]
![]() | 2015.02.07 by 몽실아빠 |
Enoch |
초보 xe 기본 메인페이지 수정
[2]
![]() | 2015.02.07 by Enoch |
드래곤봉 | 게시물 등록시 애드온 사용법 문의드려요 | |
newi | 개인서버 문의요.. [3] | 2015.02.07 by bluedream |
시원블루 |
소시랑 스킨 수정했더니 여백이 생겼어요 ㅠ
[2]
![]() | 2015.02.07 by bluedream |
saramjh | 기본 Captcha 1.7 쓰고있습니다. | |
간지횽 | [급] css 수정 부탁드립니다. [11] | 2015.02.06 by 간지횽 |
국희씨 | 홈페이지로 사용중 취소 어떻게 하나요 ㅠ.ㅠ [1] | 2015.02.06 by DoorWeb |
스무스스 |
1.7.2->1.7.8 업데이트 이후 파비콘 및 모바일 홈 화면 아이콘 업로드가 안되는 문제
[5]
![]() | 2015.02.06 by 콜롬보. |
배움쉼터용 | 반응형 웹이 모바일에서 안먹힙니다.. [1] | 2015.02.06 by 배움쉼터용 |
키스미베이베 | 공홈에 볼트체가 적용된거같은데... |
크롬의 F12 등 개발자 도구를 이용하여 해당소스의 위치와 줄을 찾은 뒤 삭제하시면 사라집니다