粘性表格行

Question

粘性表格行

4

我正在尝试实现一个类似于iOS的日历列表视图。基本上，我现在正在循环遍历我的事件数组。如果它是一个新日期，就打印出日期头，否则就打印出日历事件。我想让日期头行保持粘性，直到它们被“滚动掉”。如何实现这一点呢？我看到很多关于粘性标题的例子，但没有一个实际应用这个“粘性”特性到表格行上的。我的<table>也放置在自己的可滚动固定高度中，我希望标题粘在

的顶部而不是top:0;处。我已经把我的代码放到了http://codepen.io/anon/pen/zxpkr上，现在我需要修复colspan，因为我的<td>没有跨越单元格，并让<tr>粘在

的顶部。

- chongzixin

有任何 HTML - CSS - JavaScript 代码可以提供吗？另外，你的 CodePen 示例与表格无关。那些是分隔符。div's。无论如何，请去看一下：http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/ - Milche Patern

你也可以看一下这个网址：https://dev59.com/cmHVa4cB1Zd3GeqPkzwm?rq=1 - Milche Patern

@user1258600，你的问题是客户端问题，因此你必须在你的代码示例中提供PHP的HTML输出。修改这个jsfiddle示例和http://jsfiddle.net/dCKmL/。 - SaidbakR

@sємsєм，我的代码现在在CodePen上了@http://codepen.io/anon/pen/zxpkr！ :) - chongzixin

@apaul34208，感谢您的帮助。我们通过您的jsfiddle已经接近目标了，但是它没有像Instagram那样的推上效果，因为一个标题会将另一个标题推开。 - chongzixin

显示剩余2条评论

3个回答

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

- user1721135

嗨。但是对于每个日期，我有多个“标题”，我正在尝试实现一个“标题”弹出另一个的滚动效果。这样做不会实现这个效果，对吧？ - chongzixin

我没有注意到那个。在这种情况下，你应该使用jQuery，并根据滚动位置改变CSS。 - user1721135

嗯，这不是我当前不成功的代码正在尝试做的吗？还是有其他方法可以实现你提到的内容。 :) - chongzixin

1

我已经用表格和 tr 替换了所有的 div，并添加了一些样式，现在它可以工作 :P

代码: Codepen 虽然它将所有标题的 tr 包装在一个 div 中，这不符合规范，但它确实可以工作。

- assembly_wizard

嗨，感谢您的回答。我尝试将其编辑以更符合我的目的，但我的colspan似乎无法正常工作。我是否漏掉了什么？http://codepen.io/anon/pen/olhbI - chongzixin

我已经修改了CodePen（现在位于http://codepen.io/anon/pen/zxpkr），使其与我现在尝试实现的内容完全相似。但它对我来说似乎没有像你那样顺利地工作。:( - chongzixin

虽然我不太理解您的两个CodePen之间的区别，但我明白您想要相同的东西，但是使用colspan="3"。问题是我现在不在电脑旁边，而且CodePen与我的iPhone浏览器不兼容。如果您可以将代码移动到JSFiddle或JSbin上，我可能能够帮助您。另外，如果colspan失败了，如果我使用div代替它，但使其看起来像一个表格，这样可以吗？ - assembly_wizard

你好！非常感谢你迄今为止的帮助！在第二段代码中，表格被放置在一个具有固定高度和overflow-y:scroll的div中。对我来说，table是最理想的选择，但我猜出于绝望，div也可以使用，只要我需要时容易添加更多列即可。jsFiddle代码在这里：http://jsfiddle.net/p9Dgh/ - chongzixin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- apaul · Accepted Answer

我不得不使用一个容器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，但我想要归功于原作者。