Я пытаюсь создать страницу с некоторым содержимым вверху и областью типа «таблица» чуть ниже. Когда пользователь прокручивает верхнюю часть, я хочу, чтобы строка, служащая заголовком таблицы, фиксировалась в верхней части окна, а остальная часть содержимого прокручивалась. Я использую бутстрап 4.
Приведенный ниже javascript (jQuery) позволяет мне сделать это, но когда я прокручиваю, пропорции строки заголовка полностью изменяются: либо слишком мала, либо слишком велика:
$(window).scroll(function(e) {
var $el = $('.header-fix');
var isPositionFixed = ($el.css('position') == 'fixed');
if ($(this).scrollTop() > 200 && !isPositionFixed) {
$el.css({
'position': 'fixed',
'top': '0px',
/*'width': '100%' */
});
}
if ($(this).scrollTop() < 200 && isPositionFixed) {
$el.css({
'position': 'static',
'top': '0px'
});
}
});
(см. Пример с ошибками здесь: https://codepen.io/alexm588/pen/RqWgdO)
Проблема, с которой я думаю, заключается в том, что когда строка получает атрибут «fixed», который остается в верхней части окна, логика начальной загрузки больше не работает. Если я добавлю ширину: 100%, то она простирается далеко за пределы контейнера, если я ничего не укажу, она не будет совмещена с сеткой.
Кто-нибудь знает, как я могу это исправить?
Спасибо!
Алекс