메리

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() );
  });
});

참고

스크롤바 위치 관련 내용

세로 고정 가로 스크롤 내용