在滾動頁面時將頁面元素保留在視圖中

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"); 
    } 
}