我正在尝试创建一个包含多个部分的页面，当您滚动时，您所在的页眉始终显示在页面顶部(在固定元素中)。我想实现与 iPhone 相同的效果，当您滚动它时，它会将旧标题“推开”并替换它。
我已经看到它用列表来完成，但我想用多个 HTML5 部分来完成。
例如:
<section>
<h1>Header 1</h1>
<p>Text for section</p>
</section>
<section>
<h1>Header 2</h1>
<p>Text for section</p>
</section>
有人知道吗？
谢谢
最佳答案
我想做这件事很久了，看到@AlienWebguy 的作品激发了我最终接受它的灵感。他的 JSFiddle 令人印象深刻，但需要大量工作。我认为这个解决方案已经准备好在我的生产应用中使用了。
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:(依赖于 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;
});
});
关于jquery - 使用 HTML 重新创建 iOS UITableView，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6720847/