스크롤 고정 버튼 js
본문
http://bookmark.weblike.jp/niken/
위 테스트 사이트입니다.
아래의 코드로
우측에 고정되는 두개의 버튼(#infoTab)과,
페이지 맨 위로(#pageTop) 버튼을 만들었습니다.
$(window).load(function () {
//pageTopへ
var topBtn = $('#pageTop');
$(window).bind("scroll", function () {
winwd = $(window).width();
scrollHeight = $(document).height();
scrollPosition = $(window).height() + $(window).scrollTop();
footHeight = $("footer").height();
if (scrollHeight - scrollPosition <= footHeight - 13) { //footerからのmargin分
topBtn.css({
"position": "absolute",
"right": "30px",
"bottom": "auto",
"top": (scrollHeight - footHeight - 53) + "px" //footerからのmargin分 + btn高さ
});
//topBtn.addClass('endP');
} else {
topBtn.css({
"position": "fixed",
"right": "30px",
"bottom": "45px",
"top": "auto"
});
//topBtn.removeClass('endP');
}
});
//tabBtn.hide();
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//var infoTab = $('#infoTab');
var infoTab = $("#infoTab");
infoTab.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
infoTab.fadeIn();
} else {
infoTab.fadeOut();
}
});
});
・ pageTop버튼을 스크롤 하다가 맨 밑 .fBtmArea 위로 붙이고 싶어서요... (bottom으로부터 136px위)
여기저기 숫자를 바꿔보고, footer 부분을 .fBtmArea 로 바꿔보기도 했는데 잘 안움직이네요...
어느 부분을 수정하면 좋을까요?
・ 오른쪽에 fixed시킨 infoTab버튼이 스크롤하면서 깜빡거립니다 (모든 브라우저)
・ 오른쪽에 fixed시킨 infoTab버튼이 크롬 외의 브라우저에서 오른쪽에 붙어서 반쯤 가려지는데
왜 이러는걸까요?
아직 PC버전밖에 코딩을 안해서 브라우저를 작게 하면 막 무너집니다~
가르침 부탁드립니다~~~~
감사합니다.
답변 1
infoTab 은 스타일에 width 값 넣어주면 되구요
스크롤은 $(window).scroll(function () { 부분에 아래처럼 추가하고
console.log($(this).scrollTop());
개발자 도구 -> 콘솔에서 해당 값 체크하면서 테스트해보세요.
아니면 fadeout 대신 hide 로 변경 해보시구요.
댓글 감사합니다 여러모로 이것저것 만져보고 있습니다^^
답변을 작성하시기 전에 로그인 해주세요.
