粘糊糊的桌子排
Sticky table rows
我正在尝试实现一个类似iOS的日历列表视图。基本上,我现在所做的就是循环浏览我的一系列事件。如果是新日期,请打印日期标题,否则打印日历事件。我想让DATE HEADER行保持粘性,直到它们被"滚动掉"。
我怎样才能做到这一点?我看到了很多关于粘性标题的例子,但并没有一个真正的例子只将这种"粘性"特性应用于表行。我的<table
也被放在它自己的可滚动固定高度内,我希望标题停留在<div>
的顶部,而不是top:0;
我已将代码放入http://codepen.io/anon/pen/zxpkr现在我要修复colspan
,因为我的<td>
没有横跨细胞,并让<tr>
粘在<div>
的顶部。
我不得不用容器div包装可滚动的div,并稍微使用if语句,但它可以工作。
工作示例
JS-
function stickyTitles(stickies) {
this.load = function () {
stickies.each(function () {
var thisSticky = jQuery(this).wrap('<div class="followWrap" />');
thisSticky.parent().height(thisSticky.outerHeight());
jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);
});
};
this.scroll = function () {
stickies.each(function (i) {
var thisSticky = jQuery(this),
nextSticky = stickies.eq(i + 1),
prevSticky = stickies.eq(i - 1),
pos = jQuery.data(thisSticky[0], 'pos'),
h = $('.mytable').offset().top;
if (pos <= jQuery('.mytable').scrollTop() + h) {
thisSticky.addClass("fixed");
if (nextSticky.length > 0 && jQuery('.mytable').scrollTop() + h >= jQuery.data(thisSticky[0], 'pos') - prevSticky.outerHeight()) {
thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - $('.mytable').scrollTop() - prevSticky.outerHeight() - h);
}
} else {
thisSticky.removeClass("fixed");
if (prevSticky.length > 0 && jQuery('.mytable').scrollTop() + h <= jQuery.data(thisSticky[0], 'pos') - prevSticky.outerHeight()) {
prevSticky.removeClass("absolute").removeAttr("style");
}
}
});
};
}
jQuery(document).ready(function () {
var newStickies = new stickyTitles(jQuery(".followMeBar"));
newStickies.load();
jQuery('.mytable').on("scroll", function () {
newStickies.scroll();
});
});
CSS
body {
height:2000px;
margin: 0;
background: #333;
color: #fff;
overflow: auto;
}
table {
width: 100%;
}
table tr {
height: 100px;
}
.followMeBar {
display: block;
background: #222;
border-bottom: solid 1px #111;
border-top: solid 1px #444;
position: relative;
z-index: 1;
width: 200%;
}
.followMeBar.fixed {
position: absolute;
top: 0;
width: 90%;
z-index: 0;
}
.followMeBar.fixed.absolute {
position: absolute;
}
.mytable {
overflow-y: scroll;
height: 250px;
}
#hidden {
overflow:hidden;
position:absolute;
width:100%;
}
HTML
<h1>Test</h1>
<p>My table in a div below...</p>
<div id="hidden">
<div class='mytable'>
<table>
<tr class='followMeBar'>
<td colspan="4">12-07-2013</td>
</tr>
<tr>
<td>4:35 PM</td>
<td>1729</td>
<td>2</td>
<td>jack</td>
</tr>
<tr>
<td>4:40 PM</td>
<td>KSKS</td>
<td>4</td>
<td>jason</td>
</tr>
<tr>
<td>5:35 PM</td>
<td>1714</td>
<td>4</td>
<td>raymond</td>
</tr>
etc...
</table>
</div>
</div>
请注意,这个方法是基于这个答案的,我必须稍微调整一下,使其适用于可滚动的div,但我想在应该表扬的地方表扬。
用一个表和tr
s替换了所有div
s,添加了一些样式,它就工作了:p
代码:Codepen
尽管它用一个div
来封装所有的报头tr
s。这并不是规格所允许的,但它确实有效。
与其制作一个行的绝对位置(顺便说一句,这在浏览器中可能不太好用),我宁愿在顶部有一个表,它可以作为表头(并粘贴在父div的顶部),并在它下面滚动数据表。
你甚至不需要使用jQuery!
http://jsbin.com/ucevuy/1/edit
* {
margin:0;
padding:0;
}
div {
border:solid red;
height:300px;
overflow:auto;
}
table {
width:400px;
}
td {
border:solid black 1px;
width:50%;
}
.head {
position:absolute;
top:0;
background-color:#fff;
}
.data {
margin-top:20px;
}
相关文章:
- 没有找到相关文章