4

我正在尝试实现一个类似于 iOS 的日历列表视图。基本上,我现在正在做的是遍历我的一系列事件。如果是新日期,则打印日期标题,否则打印日历事件。我想让 DATE HEADER 行保持粘性,直到它们被“滚动”。

我怎样才能做到这一点?我看到很多关于粘性标题的示例,但没有一个实际的示例将这种“粘性”功能仅应用于表格行。我<table的也被放在它自己的可滚动固定高度内,我希望标题贴在顶部<div>而不是在top:0;

我已经在http://codepen.io/anon/pen/zxpkr将我的代码放入笔中,现在我只剩下修复了,colspan因为我<td>没有跨越单元格,<tr>并将<div>.

4

3 回答 3

2

我不得不用容器 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,但我想在应得的情况下给予信用。

于 2013-07-17T00:40:45.830 回答
1

我宁愿在顶部有一个表格作为表头(并粘在父 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;
}
于 2013-07-14T08:19:11.927 回答
1

将所有divs 替换为 table 和trs,添加了一些样式,并且可以正常工作:P

代码:Codepen

尽管它trdiv. 规范并没有真正允许它,但它确实有效。

于 2013-07-11T00:56:32.537 回答