Jquery 使用HTML重新创建iOS UITableView_Jquery_Iphone_Html_Uitableview_Header

Jquery 使用HTML重新创建iOS UITableView

jquery iphone html uitableview

Jquery 使用HTML重新创建iOS UITableView,jquery,iphone,html,uitableview,header,Jquery,Iphone,Html,Uitableview,Header,我试图创建一个有多个部分的页面，当你滚动时，你所在的标题总是显示在页面的顶部（在一个固定的元素中）。我想实现与iPhone相同的效果，当你滚动时，它会“推”旧的标题并替换它我已经看到它是用列表完成的，但是我想用多个HTML5部分来完成例如： <section> <h1>Header 1</h1> <p>Text for section</p> </section> <section> <h1>H

我试图创建一个有多个部分的页面，当你滚动时，你所在的标题总是显示在页面的顶部（在一个固定的元素中）。我想实现与iPhone相同的效果，当你滚动时，它会“推”旧的标题并替换它

我已经看到它是用列表完成的，但是我想用多个HTML5部分来完成

例如：

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

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


标题1
第节的文本
标题2
第节的文本

有人知道吗

谢谢

我还没有看到你提到的iphone版本，但从你对它的描述，我知道它是什么样子

我看到的问题是，标题有两个上下文。首先，它们位于页面中，其次，它们位于页面顶部的固定元素中。您也没有说过，但我认为如果您要以另一种方式滚动，则标题必须以相反的方向更改

一种方法是给固定元素一个固定的高度和隐藏的溢出。然后创建一个innerdiv，其中包含所有页面标题的副本。给出内部div的相对定位。在javascript中，向页面中的所有标题添加一个事件，这些标题在到达窗口顶部时触发，以触发动画。使用jQuery为固定元素的innerdiv的位置设置动画，以便显示下一个标题。

在这里，非常类似：

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>

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

$(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;
    });
});

<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>

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

JQuery:

<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>

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

$(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;
    });
});

<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>

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

$（函数（）{
var lastScrollTop=0；
$（窗口）。滚动（功能（事件）{
var currentScrollTop=$（this.scrollTop（）；
如果（currentScrollTop>lastScrollTop）{
//向下滚动
$（'.header'）。每个（函数（）{
if（$（this）.hasClass（'fixed'））
{ 
var_next_header=$（this）.nextUntil（'.header'）.next（'.header'）；
如果（$（\u下一个\u标题）.length>0）
{
如果（$（this.offset（）.top+$（this.height（））>=$（下一个标题）.offset（）.top）
{
//收割台底部击中下一个收割台顶部
$（this）.removeClass（'fixed'）.addClass（'relative'）；
$（_next_header）.removeClass（'relative'）.addClass（'fixed'）；
}
}
}
}); 
} 
其他的
{
//向上滚动
$（'.header'）。每个（函数（）{
if（$（this）.hasClass（'fixed'））
{ 
var_prev_header=$（this）.prevUntil（'.header'）.prev（'.header'）；
如果（$（\u上一个\u标题）.length>0）
{
if（$（this）.offset（）.top
很长一段时间以来，我一直想这样做，看到@AlienWebguy的工作激发了我的灵感，让我最终接受了它。他的JSFIDLE令人印象深刻，但需要做很多工作。我认为这个解决方案已经可以在我的生产应用程序中使用了

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>

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

$(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;
    });
});

<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>

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：（依赖jQuery）
//来自：http://jsfiddle.net/AlienWebguy/mvtP7/1/ 通过：http://stackoverflow.com/questions/6720847
$（函数（）{
var lastScrollTop=0；
//当给第一个标题一个固定的位置时，紧随shift up的内联内容。
el=$（'.header'）.first（）；
//要解决这个问题：克隆它，使它不可见，从它和它的子项中删除id标签，在原始文件之前附加它
el.before（el.clone（false）.css（{'visibility'：'hidden'}）.removeAttr（“id”）.find（“*”）.removeAttr（“id”）.end（））.addClass（'fixed'）；
$（窗口）。滚动（功能（事件）{
var currentScrollTop=$（this.scrollTop（）；
$（'.header'）。每个（函数（）{
if（$（this）.hasClass（'fixed'））{
如果（currentScrollTop>lastScrollTop）{
log（“向下滚动”）；
var_next_header=$（this）.nextUntil（'.header'）.next（'.header'）；
如果（$（\u下一个\u标题）.length>0）{
if（$（'body'）.scrollTop（）>$（\u next\u header.offset（）.top）{
console.log（“收割台底部击中下一个收割台顶部”）
$（this.removeClass（'fixed'）；
$（_next_header）.addClass（'fixed'）；
}
}
}否则{
log（“向上滚动”）；
var_prev_header=$（this）.prevUntil（'.header'）.prev（'.header'）；
如果（$（\u上一个\u标题）.length>0）{
如果（$（'body'）.scrollTop（）<$（'.fixed'）.next（）.offset（）.top-$（'.fixed'）.height（））{
log（“标题的顶部击中上一个内容框的底部”）
$（this.removeClass（'fixed'）；
$（_prev_header）.addClass（'fixed'）；
}
}
}
}
}); 
lastScrollTop=currentScrollTop；
});
});
不幸的是，当你滚动内容时，它的编码方式会跳来跳去。这应该不会太难适应内容的某些定位：）我下面的答案解决了这个问题。但是，我必须同意，如果你打算使用jQuery，那么，@ TByyChoWSKI发现的插件看起来很坚固。我发现的最好的是：如果你打算使用jQuery，你可以考虑只使用这个插件：