Как создать липкий элемент, который останавливается до конца области просмотра ⇐ CSS

[Anonymous]

У меня есть заголовок и заголовок, которые должны быть липкими, но они не должны оставаться липкими, когда появляется последняя строка. Вместо этого они должны перестать быть липкими, чтобы последняя строка основного текста всегда была видна и была последним элементом, который прокручивается.
Я попытался отделить заголовок и заголовок от основного. tbody.
Но я не смог найти способ остановить блок div заголовка/thead перед последней строкой.
Изменить:
Я нашел способ чтобы сохранить интервал.
С помощью поля-дна с высотой последней строки, но мне нужно найти способ установить поле только при прокрутке тела таблицы, чтобы между заголовком не было пробела и первую строку.

Код: Выделить всё

            $(".myTable").each(function () {
var lastRowOuterHeight = $(this).find('.tableBody tr:last').outerHeight();

if (true) {// todo how to detect if table body is scrolled?
var stickyTable =  $(this).find('.stickyHeader');
stickyTable.attr('style', 'margin-bottom: ' + lastRowOuterHeight + 'px !important;');
}

});

Код: Выделить всё

    body {
height: 1000px;
}

.table tbody td {
min-width: 6rem;
max-width: 6rem;
}

.table th {
min-width: 6rem;
max-width: 6rem;
}

.stickyHeader {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
background: #f5f5f5;
}

Код: Выделить всё

Bootstrap Example











[h4]My headline[/h4]





Col
Col
Col
Col
Col
Col
Col
Col
Col
Col











 Content 
 Content 
 Content 
 Content 
 Content 
 Content 
 Content 
 Content 
 Content 
 Content 



 Content 
 Content 
 Content 
 Content 
  Content 
 Content 
 Content 
 Content 
 Content 
 Content 



 Content 
 Content 
 Content 
 Content 
 Content 
 Content 
 Content 
 Content 
 Content 
 Content 

Подробнее здесь: https://stackoverflow.com/questions/788 ... f-viewport