회사 업무 중 버그를 잡기위해 작성한 코드가 유용하게 쓰일 수 있을 것 같아 메모해둔다.

회사 커뮤니티 게시판의 왼쪽에 붙어있는 네비가

스크롤의 움직임에 따라서 위아래로 따라 움직이는데,

특정 카테고리에서는 목록의 개수가 적어서 본문이 짧다보니

스크롤을 가장 아래로 내릴 시 네비가 하단 푸터 밖으로 삐져나가버리는 버그가 있었다.

간단히 푸터 또는 본문의 마진으로 해결해보려했지만,

확장된 마진만큼 스크롤이 같이 따라와서 소용이 없었다.

결국 스크립트로 수정을 했는데,

아래의 아주 간단하고 짧은 코드만으로 완벽하게 버그를 잡았다.

$(window).scroll(function(){
    $("#yourDiv").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});

position: fixed;가 먹혀있는 div를 #yourDiv에 부여하고,

내가 -250로 적어둔 곳에 알맞은 숫자를 적으면 된다. 

윗 코드에서는 -250px로, 기존에 스크롤을 따라 내려가던 지점에서

-250px만큼 윗 부분까지만 따라오도록 지정한 것이다.

이렇게 코드를 작성하면, 

위에서 부터 몇 px인지가 아니라 아래에서부터 지정을 했기 때문에

게시글 수가 20개에서 늘어나서 50개가 되던 100개가 되던 상관없이,

스크롤이 늘어나더라도 여전히 내가 원하는 지점까지 오게 할 수가 있다.