Сохранение элемента страницы во время прокрутки страницы

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