[jQuery] scrollTop()을 활용한 고정스크롤리모컨

해당 코드를 기록해두는 것은 절대 간단한 기능 하나로 한시간이나 잡아먹어서가 아니다.ㅜ_ㅜ

브라우저 좌측 하단에 고정적으로 위치, 최초 display는 none으로써 안보이는 상태.

문서에서 일정 이하로 스크롤했을 때 fadeIn, 위로 올리면 다시 fadeOut.

요소를 클릭하면 웹페이지 최상단으로 이동하게 구현.

index.html)

Going Up

</span>

css)

#remoCon {

position: fixed;

width: 60px;

height: 20px;

right: 20px;

bottom: 20px;

display: none;

}

js)

$(document).scroll(function(){

var con = $("#remoCon");

var position = $(window).scrollTop();

if(position > 250){ con.fadeIn(500); }

else if(position < 250){ con.fadeOut(500); }

});

$("#remoCon").click(function(){

$("html, body").animate({scrollTop: 0}, 1000);

});

매우 간단하다. 왜 고생했는지 모를 정도로.-.- 코드에 대한 주석을 따로 달 필요 없이 scrollTop()의 기능만 확실히 감 잡으면 된다.

괜히 offset() 써먹을려고 낑낑대다 시간만 날렸다. 이유는 정확히 모르겠지만, display 상태가 변하기 전까지 offset().top 값을 잘 받아오다가

특정 위치를 지나 요소가 사라지거나 나타난 후엔 offset()값이 변하는것같다. 값은 바뀌는데 기준은 그대로니 fadeIn, fadeOut 기능 먹통됨.ㅜㅜ

+) 문제해결을 위한 구글링 중 eNaNII님의 티스토리에서 스크롤을 따라 움직이는 요소의 코드를 발견해서 추가로 기록해둔다. (링크)

$(window).scroll(function(){

var currentPosition = parseInt($('#myMenuLayer').css('top'));

var position = $(window).scrollTop();

$('#myMenuLayer').stop().animate({'top': position + currentPosition + 'px'}, 1000);
});

역시 간단, 스크롤링 하고자 하는 요소의 top값을 추출 후, scrollTop()값을 더하면 요소가 스크롤 후 위치해야할 y좌표값이 나온다.

이를 animate()메서드에 대입해주면 끝. stop()을 빼먹을 경우 스크롤 반복시 큐에 animate()메서드가 쌓여 가야할 위치에 제대로 갈지나 모르겠다.

Dream Archive