스크롤시 자동으로 고정시키기(fixed)

http://binalee.tistory.com/96

top bar를 스크롤시 고정된 위치에서 따라다니게 하려면 css에서 'position' : 'fixed'하면된다

하지만 일정 스크롤 이하에서만 화면에 고정되고 그전에는 붙어 있지 않게 하려면..?

브라우저의 scroll의 위치와 element offset을 비교하여 offset을 넘어가면 fixed 그렇지 않으면 absolute 또는 relative로 하면 된다.

$(window).scroll(  function() {

if(window.pageYOffset >= $("table:first").offset().top) {

$("#top-bar").css("position", "fixed")

} else {

$("#top-bar").css("position", "absolute")

}

});

jquery의 .scroll()로 스크롤 이벤트 리스너를 사용하고

window.pageYOffset : 현재 페이지에서의 화면의 위치

$(특정 element).offset() - 페이지에서 특정 element의 위치(top, left값이 나옴)를 비교해서 css처리 해준다.