Jquery Floating Header Alignment Issue

Question

http://mkoryak.github.io/floatThead/의 플로팅 헤더 스크립트가 화면 너비보다 넓은 테이블과 함께 사용할 때와 별개로 작동합니다.

그런 다음 아래로 스크롤하면 열과 머리글이 더 이상 정렬되지 않습니다. 나는이 문제를 보여줍니다이 FIDDLE을 만들었습니다

$(document).ready(function(){ 
    $("#my_table").sticky(); 

}); 

:

나는 사용하여 스크립트를 호출하고 있습니다. 로드시 페이지가 잘 보이지만 스크롤을 시작하자마자 정렬이 사라집니다.

문제를 해결할 방법이 있습니까?

내가 실제로 작업하고있는 테이블은 그리 크지 않지만 큰 것입니다. 나는 열의 수를 줄이고 싶지만이 특정 사이트에서는 불가능합니다.

UPDATE는

나는 지금 내가 온라인으로 발견 예를 사용하여 작업 있어요. NEW FIDDLE

나는 2 개의 약간의 스크롤링 문제가 있습니다.

1. 마우스 휠을 사용하여 스크롤하는 것은 특히 헤더에서 약간 번쩍 거립니다.
2. 페이지의 맨 아래로 스크롤하면 페이지의 아래 부분으로 부분적인 스크롤 업이 강제 실행되는 것 같습니다.

어떤 방법으로 문제를 해결할 수 있습니까?

바이올린은 2 호 문제를 보여 주지만 첫 번째 문제는 바이올린에서 분명하지 않습니다.

Answer 1

제목과 데이터를 전환하기 위해 table 태그에서 thead와 tbody를 사용할 수 있습니다. 적절한 정렬을 위해 CSS를 정의하십시오. 그 후 당신은 끈적 끈적한 헤더 아래의 코드를 사용할 수 있습니다

jsFiddle Example

jQuery를 :

$(document).ready(function() { 
    var theadH = $('thead').outerHeight(true); 
    $(window).scroll(function() { 
     var scrollVal = $(this).scrollTop(); 
     if (scrollVal > 0) { 
      $('thead').css({'position':'fixed'}); 
      $('tbody').css({'margin-top': theadH +'px'}); 
     } else { 
      $('thead').css({'position':'static'}); 
      $('tbody').css({'margin-top': '0px'}); 
     } 
    }); 
}); 

CSS :

table { width: 100%; } 
th,td { width: 20%; } /* there are five collums */ 
thead { top:0; } 

HTML :

<table cellpadding="0" cellspacing="0" border="0" width="100%"> 
    <thead> 
     <tr> 
      <th>ÜRÜN</th> 
      <th>ADEDİ</th> 
      <th>TUTAR</th> 
      <th>ÖDENEN TUTAR</th> 
      <th>MUALLAK TUTAR</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>90 - Dask</td> 
      <td>2</td> 
      <td>133</td> 
      <td>2347630</td> 
      <td>2347630</td> 
     </tr> 
     <tr> 
      <td>95 - Dask</td> 
      <td>4</td> 
      <td>140</td> 
      <td>234699</td> 
      <td>234699</td> 
     </tr> 
    </tbody> 
</table>