Question

人们说一张图片胜过千言万语，所以请记住这个图片：

我已经缩小了浏览器，让您了解我的意思。我有这个表，里面有几个单元格。在某些情况下，细胞可以变得非常高（如图中所示）。如果缩放设置为100％，则更改是，您肯定无法读取标记的单元格内容。简单地说，它可能不在屏幕之外。

我需要它的内容始终可见。是否有任何CSS或jQuery魔术来实现这一目标？

这是一个要清除的小提琴：https://jsfiddle.net/fmxw1sb4/

<table border="1" cellpadding="0" cellspacing="0">
  <tr><td>Title</td><td>Schedules</td></tr>
  <tr><td rowspan="200" class="content">CCS3</td><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
</table>

正如你在那里看到的那样，标题是不可见的（它太过分了）。当你向下滚动查看它的其他时间表时，它会变得可见......但是如果你继续滚动它会再次消失。

提前致谢。最好的问候，
埃米利亚诺

Answer 1

最简单的解决方案是修改标题并给出顶部：50％如果这是页面中唯一的组件。

将您的标记更新为

<td rowspan="200" class="content"><div class="title-col">CCS3</div></td>

的CSS：

.title-col {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}

如果除了表格之外还有其他组件。那我建议一个不同的解决方案。将.title-col更改为position：absolute;使用javascript更改顶部值。

var defaultTop =  $('.title-col').offset().top;

$(window).on('scroll', function() {

 if($(window).scrollTop() > $('table .content').offset().top) {
   $('.title-col').css('top', $(window).scrollTop() + defaultTop - $('table .content').offset().top)
 } else {
     $('.title-col').css('top', defaultTop);
 }

});

的jsfiddle https://jsfiddle.net/karthick6891/fmxw1sb4/1/

Answer 2

我想我已经实现了我想做的事情。您可以在jsfiddle（https://jsfiddle.net/fmxw1sb4/3/）

的第3版中看到它

自己尝试，因为它在jsfiddle中无法正常工作。

<强> CSS

.content {
  vertical-align:middle;
  width: 100px;
  position: realtive;
}

.follow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.enterpriseSpace {
  height:420px;
  width:80%;
  border:1px solid;
  margin:10px 2px;
  text-align:center;
  vertical-align:middle;
  line-height:420px;
  background-color:#909090;
  color:#FFF;
}

<强> JS

function follow() {

var defaultTop = 0;

    var prevH = 0;

    $(".follow").each(function() {

        if( defaultTop ==0) {

            defaultTop = $(this).parent().offset().top;

            prevH = $(this).parent().height();

        }

else {

            defaultTop+=prevH;

            prevH = $(this).parent().height();

        }


        var wScrollTop = $(window).scrollTop();
        var wHeight = window.innerHeight;

        var cellTop = defaultTop;
        var cellBottom = defaultTop+prevH-60;
        var relativeBottom = cellBottom - wScrollTop;
        var up = 0;
        var down = 0;

        if(cellTop <=  wScrollTop+wHeight) {
            if(cellTop > wScrollTop)
                up = cellTop;
            else
                up = wScrollTop;

            if(wScrollTop + wHeight > cellBottom)
                down = cellBottom;
            else
                down = wScrollTop + wHeight;

            $(this).css('top', (up+down)/2);
        }
        else
            $(this).css('top', wScrollTop+cellTop+200);
    });


}

$(window).on('scroll', function() {
    follow();
});

$(document).ready(function () {
    follow();
});

<强> HTML

<div class="enterpriseSpace">
  Enterprise Logo
</div>
<table border="1" cellpadding="0" cellspacing="0">
  <tr><td>Title</td><td>Schedules</td></tr>
  <tr><td rowspan="40" class="content"><div id="CSS3" class="follow">CSS3</div></td><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td rowspan="40" class="content"><div id="HTML5" class="follow">HTML5</div></td><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
  <tr><td>Monday 10:00 to 11:00</td></tr>
</table>
<div class="enterpriseSpace">
  Footer
</div>

在非常高的细胞内可以看到细胞的内容

2 个答案: