Odtwarzanie UITableView iOS przy użyciu HTML

Question

Próbuję utworzyć stronę, na której znajduje się wiele sekcji, a podczas przewijania nagłówka, w którym się znajdujesz, jest zawsze wyświetlany u góry strony (w stałym elemencie). Chcę osiągnąć ten sam efekt, co na iPhonie, gdzie podczas przewijania "przesuwa" stary nagłówek i zastępuje go.

Widziałem to zrobić z listami, ale chcę to zrobić z wieloma sekcjami HTML5.

Na przykład:

<section> 
<h1>Header 1</h1> 
<p>Text for section</p> 
</section> 

<section> 
<h1>Header 2</h1> 
<p>Text for section</p> 
</section> 

Czy ktoś ma jakiś pomysł?

Dzięki

Answer 1

Proszę bardzo, bardzo podobne:

http://jsfiddle.net/AlienWebguy/mvtP7/1/

HTML:

<div id="header1" class="header fixed"> 
    <h2>Header1</h2> 
</div> 
<div id="header1_content"> 
    <p>Lorem ipsum dolor sit amet...</p> 
</div> 


<div id="header2" class="header relative"> 
    <h2>Header2</h2> 
</div> 
<div id="header2_content"> 
    <p>Lorem ipsum dolor sit amet...</p> 
</div> 

<div id="header3" class="header relative"> 
    <h2>Header3</h2> 
</div> 
<div id="header3_content"> 
    <p>Lorem ipsum dolor sit amet...</p> 
</div> 

CSS:

p { 
    background-color:#F0F0F0; 
} 

.header { 
    background-color:#CCC; 
    width:100%; 
    top:0; 
    left:0; 
} 

.header h2 { 
    margin:20px; 
} 

.fixed { 
    position:fixed; 
} 

.relative { 
    position:static; 
} 

#header1_content { 
    margin-top:80px; 
} 

JQuery:

$(function(){ 
    var lastScrollTop = 0; 
    $(window).scroll(function(event){ 
     var currentScrollTop = $(this).scrollTop(); 
     if (currentScrollTop > lastScrollTop){ 

      // Scrolling down 
      $('.header').each(function(){ 
       if($(this).hasClass('fixed')) 
       { 
        var _next_header = $(this).nextUntil('.header').next('.header'); 
        if($(_next_header).length > 0) 
        { 
         if(($(this).offset().top + $(this).height()) >= $(_next_header).offset().top) 
         { 
          // Bottom of header hit top of next header 
          $(this).removeClass('fixed').addClass('relative'); 
          $(_next_header).removeClass('relative').addClass('fixed'); 
         } 
        } 
       } 
      }); 
     } 
     else 
     { 
      // Scrolling up 
      $('.header').each(function(){ 
       if($(this).hasClass('fixed')) 
       { 
        var _prev_header = $(this).prevUntil('.header').prev('.header'); 
        if($(_prev_header).length > 0) 
        { 
         if($(this).offset().top <= ($('#' + $(_prev_header).attr('id') + '_content').offset().top + $(this).height())) 
         { 
          // Top of header hit bottom of previous content box 
          $(this).removeClass('fixed').addClass('relative'); 
          $(_prev_header).removeClass('relative').addClass('fixed'); 
         } 
        } 
       } 
      }); 
     } 
     lastScrollTop = currentScrollTop; 
    }); 
}); 

Więc w zasadzie to, co robimy jest tworzenie niektóre podstawowe wykrywanie kolizji. Kiedy przewijamy w dół, wykrywamy, czy dno bieżącego nagłówka koliduje z górą następnego nagłówka. Jeśli tak, wymieniamy to. Kiedy przewijamy w górę, wykrywamy, czy górna część bieżącego nagłówka koliduje z dnem poprzedniego kontenera treści i dokonujemy zamiany.

Przeniesienie tego na wyższy poziom w celu dokładniejszego emulowania menu iPhone'a, prawdopodobnie w razie kolizji prawdopodobnie zmieni się położenie nagłówków w DOM w locie, co dałoby iluzję jednego "popchnięcia drugiego" na uboczu ", a kiedy poprzedni zniknie z ekranu, zastosujesz ustalone pozycjonowanie do nowego nagłówka. Ta wersja demonstracyjna powinna Cię znaleźć przynajmniej na właściwej ścieżce :)

Mam nadzieję, że to pomoże!

Answer 2

Nie widziałem wersję iPhone można mówić o jednak od tego, jak ją opisać mam pojęcia, co to jest.

Problemem, jaki widzę, jest to, że nagłówki mają dwa konteksty. Po pierwsze są na stronie, a po drugie są w stałym elemencie na górze strony. Również nie powiedziałeś, ale zakładam, że gdybyś przewinął w drugą stronę, nagłówki musiałyby się zmienić w przeciwnym kierunku.

Jednym podejściem byłoby nadanie elementowi stałemu stałej wysokości i ukrytego przelewu. Następnie użyj innerdiv, który zawiera kopię wszystkich nagłówków stron. Daj wewnętrznemu divowi względne pozycjonowanie. W javascript dodaj wydarzenie do wszystkich nagłówków znajdujących się na stronie, która uruchamia się po dotarciu do górnej części okna, aby uruchomić animację. Użyj jQuery, aby ożywić położenie wewnętrznego dysku elementu stałego, aby odsłonił następny nagłówek.

Answer 3

Chciałem to zrobić przez długi czas i widząc @ pracy AlienWebguy zainspirowała mnie, by w końcu wziąć go.Jego JSFiddle był imponujący, ale wymagał wiele pracy. Myślę, że to rozwiązanie jest prawie gotowe do użycia w mojej aplikacji produkcyjnej.

http://jsfiddle.net/RichardBronosky/VMnnr/

HTML:

<body> 
    <div class="tableview"> 
     <div id="header1" class="header"> 
      <h2>Header 1</h2> 
     </div> 
     <div id="header1_content"> 
      <p> 
      header1_content1 
      </p> 
      <p> 
      header1_content2 
      </p> 
      <p> 
      header1_content3 
      </p> 
     </div> 

     <div id="header2" class="header"> 
      <h2>Header 2</h2> 
     </div> 
     <div id="header2_content"> 
      <p> 
      header2_content1 
      </p> 
      <p> 
      header2_content2 
      </p> 
      <p> 
      header2_content3 
      </p> 
     </div> 

     <div id="header3" class="header"> 
      <h2>Header 3</h2> 
     </div> 
     <div id="header3_content"> 
      <p> 
      header3_content1 
      </p> 
      <p> 
      header3_content2 
      </p> 
      <p> 
      header3_content3 
      </p> 
     </div> 
    </div> 
</body> 

CSS:

body { 
    font-family:Helvetica,Arial,san-serif; 
} 

div.tableview { 
    background-color:#CCC; 
} 

.tableview p:nth-child(odd) { 
    background-color:#FFF; 
} 

.tableview p:nth-child(even) { 
    background-color:#F0F0F0; 
} 

.tableview p { 
    padding:8px; 
    margin:1px 0px 1px 0px; 
} 

body, .tableview p:last-of-type, .tableview p:first-of-type, .tableview .header h2 { 
    margin:0px; 
} 

.tableview .header { 
    background-color:#333; 
    color:#FFF; 
    width:100%; 
    position:relative; 

} 

.tableview .header h2 { 
    padding:8px 4px 8px 4px; 
} 

.tableview .fixed { 
    position:fixed; 
    top:0; 
    left:0; 
} 

javascript: (opiera się na jQuery)

// From: http://jsfiddle.net/AlienWebguy/mvtP7/1/ via: http://stackoverflow.com/questions/6720847 
$(function(){ 
    var lastScrollTop = 0; 
    // When the first header is given a fixed position, the inline content that follows with shift up. 
    el = $('.header').first(); 
    // To over come this: clone it, make it invisible, remove id tags from it and its children, attach it before the original 
    el.before(el.clone(false).css({'visibility':'hidden'}).removeAttr("id").find("*").removeAttr("id").end()).addClass('fixed'); 

    $(window).scroll(function(event){ 
     var currentScrollTop = $(this).scrollTop(); 
     $('.header').each(function(){ 
      if($(this).hasClass('fixed')){ 
       if (currentScrollTop > lastScrollTop){ 
        console.log('scrolling down'); 
        var _next_header = $(this).nextUntil('.header').next('.header'); 
        if($(_next_header).length > 0){ 
         if($('body').scrollTop() > $(_next_header).offset().top){ 
          console.log("Bottom of header hit top of next header") 
          $(this).removeClass('fixed'); 
          $(_next_header).addClass('fixed'); 
         } 
        } 
       } else { 
        console.log('scrolling up'); 
        var _prev_header = $(this).prevUntil('.header').prev('.header'); 
        if($(_prev_header).length > 0){ 
         if($('body').scrollTop() < $('.fixed').next().offset().top-$('.fixed').height()){ 
          console.log("Top of header hit bottom of previous content box") 
          $(this).removeClass('fixed'); 
          $(_prev_header).addClass('fixed'); 
         } 
        } 
       } 
      } 
     }); 
     lastScrollTop = currentScrollTop; 
    }); 
});