[JQUERY] 내용으로 수평으로 스크롤하기 위해 고정 된 위치 div를 어떻게 움직입니까? jQuery를 사용합니다

내용으로 수평으로 스크롤하기 위해 고정 된 위치 div를 어떻게 움직입니까? jQuery를 사용합니다

해결법

1. ---

   1.데모는 요소의 위치를 ​​유지하고 있습니다. 요소의 왼쪽 속성을 고정하고 조작합니다.

   데모는 요소의 위치를 ​​유지하고 있습니다. 요소의 왼쪽 속성을 고정하고 조작합니다.

   var leftInit = $(".scroll_fixed").offset().left;
   var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0));
   
   
   $(window).scroll(function(event) {
       var x = 0 - $(this).scrollLeft();
       var y = $(this).scrollTop();
   
       // whether that's below the form
       if (y >= top) {
           // if so, ad the fixed class
           $('.scroll_fixed').addClass('fixed');
       } else {
           // otherwise remove it
           $('.scroll_fixed').removeClass('fixed');
       }
   
       $(".scroll_fixed").offset({
           left: x + leftInit
       });
   
   });
   

   lestinit을 사용하면 가능한 왼쪽 여백이 고려됩니다. 여기서 시도해보십시오 : http://jsfiddle.net/f7bme/

2. ---

   2.당신은 지금까지 이제 옮겼을 것입니다. 이 jQuery 플러그인은이 정확한 문제를 해결하기 위해 만들어졌습니다.

   당신은 지금까지 이제 옮겼을 것입니다. 이 jQuery 플러그인은이 정확한 문제를 해결하기 위해 만들어졌습니다.

   이 데모는 페이지 상단에 고정시 여전히 가로로 스크롤되는 장바구니 요약을 사용합니다. 또한 테이블 형 데이터 위의 헤더에도 사용했습니다.

   데모 : http://jsfiddle.net/y3qv5/434/ (updated)

   플러그인 및 출처 : https://github.com/bigspotteddog/scrolltofixed.

   용법:

   $(document).ready(function() {
       $('#cart').scrollToFixed( { marginTop: 10 } );
   });
   

3. ---

   3.CSS 속성 위치를 사용하십시오 : 끈적 끈적한 점을 얻으십시오.

   CSS 속성 위치를 사용하십시오 : 끈적 끈적한 점을 얻으십시오.

   여기에 설명 된 기사가 설명되어 있으며 데모가 있습니다.

   http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

   유일한 단점은 브라우저 호환성입니다.

from https://stackoverflow.com/questions/4676131/how-do-i-get-a-fixed-position-div-to-scroll-horizontally-with-the-content-using by cc-by-sa and MIT license