[JavaScript][CSS] fixed 요소 스크롤 / fixed 가로 고정 세로 스크롤 / position fixed 스크롤

sidebar 요소의 position은 fixed

.sidebar{
    position : fixed;
}

 

스크롤 위치에 맞춰 해당 요소의 margin-top이나 margin-left 속성을 실시간으로 변경해주어 이동하는 것처럼 보이게 하는 원리임.

//가로스크롤 시에는 고정하고 세로스크롤시에는 움직이는 경우
$(function() {
  var marginTop = parseInt( $(".sidebar").css('margin-top') );
  $(window).scroll(function(e) {
    $(".sidebar").css("margin-top", marginTop - $(this).scrollTop() );
  });
});

//세로스크롤 시에는 고정하고 기로스크롤시에는 움직이는 경우
$(function() {
  var marginLeft = parseInt( $(".sidebar").css('margin-left') );
  $(window).scroll(function(e) {
    $(".sidebar").css("margin-left", marginLeft - $(this).scrollLeft() );
  });
});

.scrollLeft()	선택한 요소 집합의 첫 번째 요소의 수평 스크롤 바의 위치를 얻거나,  선택된 요소의 수평 스크롤 바의 위치를 인수로 전달받은 값으로 설정한다.
.scrollTop()	선택한 요소 집합의 첫 번째 요소의 수직 스크롤 바의 위치를 얻거나,  선택된 요소의 수직 스크롤 바의 위치를 인수로 전달받은 값으로 설정한다.

 

 

---

참고

스크롤바 위치 관련 내용

jQuery 입문 | 요소의 영역 | 요소의 스크롤 위치 .scrollLeft() .scrollTop()

세로 고정 가로 스크롤 내용

 

CSS 세로 고정 가로 스크롤 - 제타위키