스크롤하는 페이지에서 페이지 요소를 보임 유지

Question

페이지의 나머지 부분을 스크롤하는 동안 뷰에 요소를 유지하는 솔루션을 찾고 있습니다.

나는 이미 커뮤니티를 통조림으로 만든 해결책을 알고 있는지 알아보기 위해 바퀴를 다시 발명하고 싶지 않습니다.

나는 이것을 가지고있는 거대한 테이블에 적용하고 싶습니다. 사용자들이 아래로 스크롤 할 때 테이블 헤더를 계속 볼 수 있기를 바랍니다.

내가 찾고있는 것은 오버플로 CSS 설정이 적용된 스크롤 가능 테이블과 다릅니다. 스크롤 가능한 테이블을 사용할 수없는 이유는이 방법이 수천 개의 행을 가지고 매우 느려지 기 때문입니다. 또한이 방법은 iPhone 브라우저에서 제대로 작동하지 않습니다.

사용자가 페이지를 스크롤 할 때 테이블의 머리글이 브라우저보기 상단 가장자리에 '고정'되도록하는 것이 이상적입니다. 반대로 사용자가 다시 스크롤하면 헤더가 시작된 원래 위치로 다시 도착할 때까지 계속해서 스틱됩니다.

Answer 1

#element { position: fixed; ... }을 찾고 계십니까? JS를 사용하여 고정, 상대 및 절대 사이를 전환 할 수 있습니다.

http://www.w3schools.com/cssref/pr_class_position.asp

편집

그들은 jQuery를 사용

http://www.zocdoc.com/search.aspx?dr_specialty=98&address=Enter+a+City+and+State%2C+or+Zip&insurance_carrier=-1&insurance_plan=-1&button.x=166&button.y=21, 그것은 복잡하지 않는 것 [나는 그들이 생각하지 않았 으면] 그들이에 그것을 할 방법에 대해 살펴보고 그들은 또한 IE6 해결 방법을 가지고있다.

$(function() { 
    var msie6 = $.browser.msie && $.browser.version < 7; 
    if (!msie6) { 
     var top = $('#scroll_header').offset().top 
       - parseFloat($('#scroll_header').css('margin-top').replace(
         /auto/, 0)); 
     $(window).scroll(function(event) { 
      var y = $(this).scrollTop(); 
      if (y >= top) { 
       $('#scroll_header').addClass('fixed'); 
      } else { 
       $('#scroll_header').removeClass('fixed'); 
      } 
     }); 
     var y = $(this).scrollTop(); 
     if (y >= top) { 
      $('#scroll_header').addClass('fixed'); 
     } else { 
      $('#scroll_header').removeClass('fixed'); 
     } 
    } else { 
     setInterval("checkScroll()", 100); 
    } 
}); 
function checkScroll() { 
    ie6top = $('#scroll_header_wrapper').offset().top; 
    if ($(document).scrollTop() > ie6top) { 
     $('#scroll_header').css("top", $(document).scrollTop() - ie6top + "px"); 
     $('#scroll_header').css("visibility", "visible"); 
    } else { 
     $('#scroll_header').css("visibility", "hidden"); 
    } 
}