在滚动页面时将页面元素保留在视图中

Question

我正在寻找一种解决方案，在滚动页面的其余部分时保留元素的视图。

我不想重新发明轮子，所以我想了解社区是否知道罐装解决方案。

我想将其应用于我拥有的巨大表格，并且希望用户能够在向下滚动时继续查看表格标题。

只是为了澄清，我正在寻找的是不同于滚动表与溢出CSS设置。我无法使用可滚动表的原因是因为该方法在数千行中变得非常缓慢。此外，该方法在iPhone浏览器上无法正常工作。

理想情况下，我希望它能够在用户向下滚动页面时，表格的标题会“粘”在浏览器视图的顶部边缘。相反，如果用户向后滚动，它将继续粘在那里，直到它返回到标题开始的原始位置。

Answer 1

您是否在寻找#element { position: fixed; ... }？您可以使用JS在固定，相对和绝对之间切换。

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

编辑

看看他们是如何做到这一点的[我希望他们不要介意] 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

他们使用jQuery，它似乎并不复杂，他们也有一个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"); 
    } 
}