CSS 세로 고정 가로 스크롤

1 개요

CSS 세로 고정 가로 스크롤

<style>
body { width:3000px; height: 900px; background: repeating-linear-gradient( 45deg, transparent, transparent 40px, #ccc 40px, #ccc 80px ), linear-gradient( to bottom, #eee, #999 ); }
#red-box {
    position: fixed;
    width:100px; height:100px;
    left: 180px; top: 20px;
    background: red;
}
</style>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
  var marginLeft = parseInt( $("#red-box").css('margin-left') );
  $(window).scroll(function(e) {
    $("#red-box").css("margin-left", marginLeft - $(this).scrollLeft() );
  });
});
</script>

<div id="red-box"></div>

2 같이 보기

• HTML 큰 테이블 틀 고정

3 참고

• http://stackoverflow.com/questions/8327093/position-a-div-fixed-vertically-and-absolute-horizontally-within-a-position