jquery - 使单元格的内容在非常高的单元格中可见

Question

人们说一张图片胜过一千个字，所以请记住这张图片:

为了让您理解我的意思，我已经缩小了浏览器。我有这张 table ，里面有几个单元格。在某些情况下，单元格会变得非常高(如图所示)。如果将缩放设置为 100%，则变化是，您不能总是阅读标记单元格的内容。简单地说，它可能在屏幕之外。

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

这是一个需要清除的 fiddle :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

最简单的解决方案是固定标题并给予 top: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/