jquery – 使用HTML重新创建iOS UITableView

我正在尝试创建一个页面,其中有多个部分,当您滚动标题时,您所在的标题始终显示在页面顶部(在固定元素中).我希望获得与iPhone相同的效果,当你滚动它时“推”旧标题并取而代之.

我已经看到它完成了列表,但我想用多个HTML5部分来做.

例如：

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

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

有谁有想法吗？

谢谢

解决方法

你去,非常相似：

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

基本上我们正在做的是创建一些基本的碰撞检测.当我们向下滚动时,我们检测当前标题的底部是否与下一个标题的顶部发生碰撞.如果是,我们将其换掉.当我们向上滚动时,我们检测当前标题的顶部是否与前一个内容容器的底部碰撞并进行交换.

将其提升到更高级别以更准确地模拟iPhone菜单,你可能想要在它们碰撞时动态地将标题重新定位在DOM中,这会产生一种“推动另一个”的错觉“,然后一旦前一个离开屏幕,你就可以将固定定位应用到新标题.这个演示应该让你至少走上正确的轨道:)

希望这可以帮助！