Мобильная версия< div class="snippet-code">
Код: Выделить всё
const $tableContainer = $('.matrix-container');
const $table = $tableContainer.find('table');
const $priceDivs = $('.price');
const $thead = $table.find('thead');
$thead.css('height', 'auto');
// Capture the initial height after setting it to auto to ensure it's computed correctly
var initialHeaderHeight = $thead.height();
$(window).scroll(function() {
const tableRect = $table[0].getBoundingClientRect();
if (tableRect.top = 0) {
$priceDivs.hide(500);
setTimeout(() => {
$thead.css('height', initialHeaderHeight * 0.7); // Reduce 70% of the height
}, 500);
} else {
$priceDivs.show(500);
setTimeout(() => {
$thead.css('height', initialHeaderHeight); // Restore to initial height
}, 500);
}
});Код: Выделить всё
.matrix-container {
position: relative;
padding-top: 100px;
/* To ensure the table is not at the top of the viewport initially */
}
table {
width: 100%;
}
thead {
background-color: #f9f9f9;
position: sticky;
top: 0;
transition: height 1s ease-in-out;
}
.price {
display: block;
margin-bottom: 20px;
background-color: #f0f0f0;
padding: 10px;
transition: opacity 1s ease-in-out;
}
.text {
margin-top: 150px;
margin-bottom: 1 5 0 p x ; < b r / > } < / c o d e > < b r / > < p r e c l a s s = " s n i p p e t - c o d e - h t m l l a n g - h t m l P r e t t y p r i n t - o v e r r i d e " > < c o d e > & l t ; s c r i p t s r c = " h t t p s : / / c d n j s . c l o u d f l a r e . c o m / a j a x / l i b s / j q u e r y / 3 . 7 . 1 / j q u e r y . m i n . j s " & g t ; & l t ; / s c r i p t & g t ; < b r / > & l t ; ! D O C T Y P E h t m l & g t ; < b r / > & l t ; h t m l & g t ; < b r / > < b r / > & l t ; b o d y & g t ; < b r / > & l t ; d i v c l a s s = " m a t r i x - c o n t a i n e r " & g t ; < b r / > & l t ; t a b l e & g t ; < b r / > & l t ; t h e a d & g t ; < b r / > & l t ; t r & g t ; < b r / > & l t ; t h & g t ; < b r / > H e a d e r 1 < b r / > & l t ; d i v c l a s s = " p r i c e " & g t ; P r i c e & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " d e t a i l s " & g t ; D e t a i l s & l t ; / d i v & g t ; < b r / >
Clcik
Header 2
Price
Details
Clcik
Header 3
Price
Details
Clcik
Data 1
Data 2
Data 3
Data 1
Data 2
Data 3
Data 1
Data 2
Data 3
Data 1
Data 2
Data 3
Data 1
Data 2
Data 3
Data 1
Data 2
Data 3
Data 1
Data 2
Data 3
Data 1
Data 2
Data 3
Data 1
Data 2
Data 3
Data 1
Data 2
Data 3
Data 1
Data 2
Data 3
Data 1
Data 2
Data 3
Data 1
Data 2
Data 3
Data 1
Data 2
Data 3
Data 1
Data 2
Data 3
Data 1
Data 2
Data 3
Data 1
Data 2
Data 3
Data 1
Data 2
Data 3
Data 1
Data 2
Data 3
Data 1
Data 2
Data 3
Data 1
Data 2
Data 3
Data 1
Data 2
Data 3
Data 1
Data 2
Data 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales lorem libero, a egestas enim faucibus non. Nullam tincidunt hendrerit faucibus. Vestibulum laoreet nulla in odio bibendum, vel facilisis ligula mattis. Proin a neque ullamcorper, bibendum
purus sit amet, vulputate elit. Curabitur hendrerit purus velit, varius luctus sem aliquam non. Aenean porttitor interdum orci, ac sodales lorem facilisis a. Etiam scelerisque nunc mauris, at gravida risus venenatis vel. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eget ligula pretium, iaculis nisi non, pretium risus. Duis eu accumsan erat. Aenean mollis ut dolor id tincidunt. Praesent in risus sit amet leo auctor venenatis. Etiam aliquam
quis nisl eu mollis. Pellentesque non diam sed neque finibus sollicitudin sed non neque. Sed vitae augue libero. Sed eu feugiat eros. Aliquam elementum feugiat arcu sed mattis. Nunc vestibulum sem nibh, sodales consequat arcu luctus ac. Ut tortor
turpis, ultrices quis pulvinar at, rutrum ut arcu. Integer dapibus erat ante, vitae laoreet est sagittis et. Sed feugiat scelerisque risus, a mattis justo placerat ac. Sed blandit lorem quis urna hendrerit, nec ultricies erat molestie. Vivamus tempor
sapien quis lacus bibendum tempor. Mauris lacinia interdum scelerisque. Vivamus at elit quis urna aliquet gravida eget a dui. Aenean et pharetra nisi, eget euismod augue. Duis mauris leo, convallis pretium nulla vitae, finibus porttitor diam. Cras
nisl massa, volutpat fringilla leo ac, dictum laoreet tortor. Donec rhoncus porta eleifend. Vivamus placerat tortor at ipsum volutpat, in mollis nulla facilisis. Aenean pharetra dui at convallis ultricies. Maecenas fringilla sit amet neque at facilisis.
In blandit, turpis eu aliquam lobortis, arcu nisl tempor tortor, nec tristique odio diam sed velit. Fusce luctus lectus neque, ac hendrerit massa hendrerit ac. Aenean diam tortor, volutpat in sollicitudin faucibus, congue ut quam. Donec fringilla
imperdiet eros vel auctor. Nulla quis risus placerat, commodo quam vitae, elementum lacus. Maecenas vulputate scelerisque diam, at ornare justo imperdiet non. In venenatis tortor eget ante semper, sed commodo purus posuere. Suspendisse lobortis
dapibus massa, at malesuada diam vestibulum a. Nam nisl sem, consequat non risus ultricies, consectetur varius massa. In nec nulla eget erat rutrum consectetur. Sed molestie rhoncus lorem quis finibus. Phasellus aliquet leo nec enim luctus facilisis.
Mauris sodales porta vehicula. Quisque pharetra, justo tincidunt pharetra aliquet, arcu mauris consequat turpis, ut commodo nisl odio nec urna. Sed faucibus elit a enim ullamcorper congue. Ut ultricies ante eu dolor facilisis aliquet. Sed odio ligula,
tristique ac auctor et, commodo ut tortor. Curabitur pellentesque metus nec libero auctor, id vehicula dolor iaculis. Donec eu libero pellentesque, efficitur tellus ac, pretium ex. Nulla interdum nisi eu ipsum porta, vitae maximus nisl fringilla.
Nullam lobortis elit arcu, quis vestibulum mauris auctor eget. Nunc blandit neque eget tellus faucibus laoreet. Suspendisse ullamcorper massa eu tortor tristique, non cursus urna volutpat. Phasellus eu interdum lacus. Mauris arcu risus, hendrerit
vitae nisl at, rhoncus porta ante. Sed ac arcu quis velit consectetur placerat et a arcu. Phasellus rutrum metus sodales velit ultrices, eu varius tellus sollicitudin. Praesent tincidunt justo pellentesque urna sollicitudin porta. In accumsan magna
id bibendum blandit. Aliquam fringilla felis in velit lobortis commodo et ac lectus. Vivamus eget ex a risus tempor consectetur. Phasellus molestie ligula lacus, ac imperdiet nulla fermentum non.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales lorem libero, a egestas enim faucibus non. Nullam tincidunt hendrerit faucibus. Vestibulum laoreet nulla in odio bibendum, vel facilisis ligula mattis. Proin a neque ullamcorper, bibendum
purus sit amet, vulputate elit. Curabitur hendrerit purus velit, varius luctus sem aliquam non. Aenean porttitor interdum orci, ac sodales lorem facilisis a. Etiam scelerisque nunc mauris, at gravida risus venenatis vel. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eget ligula pretium, iaculis nisi non, pretium risus. Duis eu accumsan erat. Aenean mollis ut dolor id tincidunt. Praesent in risus sit amet leo auctor venenatis. Etiam aliquam
quis nisl eu mollis. Pellentesque non diam sed neque finibus sollicitudin sed non neque. Sed vitae augue libero. Sed eu feugiat eros. Aliquam elementum feugiat arcu sed mattis. Nunc vestibulum sem nibh, sodales consequat arcu luctus ac. Ut tortor
turpis, ultrices quis pulvinar at, rutrum ut arcu. Integer dapibus erat ante, vitae laoreet est sagittis et. Sed feugiat scelerisque risus, a mattis justo placerat ac. Sed blandit lorem quis urna hendrerit, nec ultricies erat molestie. Vivamus tempor
sapien quis lacus bibendum tempor. Mauris lacinia interdum scelerisque. Vivamus at elit quis urna aliquet gravida eget a dui. Aenean et pharetra nisi, eget euismod augue. Duis mauris leo, convallis pretium nulla vitae, finibus porttitor diam. Cras
nisl massa, volutpat fringilla leo ac, dictum laoreet tortor. Donec rhoncus porta eleifend. Vivamus placerat tortor at ipsum volutpat, in mollis nulla facilisis. Aenean pharetra dui at convallis ultricies. Maecenas fringilla sit amet neque at facilisis.
In blandit, turpis eu aliquam lobortis, arcu nisl tempor tortor, nec tristique odio diam sed velit. Fusce luctus lectus neque, ac hendrerit massa hendrerit ac. Aenean diam tortor, volutpat in sollicitudin faucibus, congue ut quam. Donec fringilla
imperdiet eros vel auctor. Nulla quis risus placerat, commodo quam vitae, elementum lacus. Maecenas vulputate scelerisque diam, at ornare justo imperdiet non. In venenatis tortor eget ante semper, sed commodo purus posuere. Suspendisse lobortis
dapibus massa, at malesuada diam vestibulum a. Nam nisl sem, consequat non risus ultricies, consectetur varius massa. In nec nulla eget erat rutrum consectetur. Sed molestie rhoncus lorem quis finibus. Phasellus aliquet leo nec enim luctus facilisis.
Mauris sodales porta vehicula. Quisque pharetra, justo tincidunt pharetra aliquet, arcu mauris consequat turpis, ut commodo nisl odio nec urna. Sed faucibus elit a enim ullamcorper congue. Ut ultricies ante eu dolor facilisis aliquet. Sed odio ligula,
tristique ac auctor et, commodo ut tortor. Curabitur pellentesque metus nec libero auctor, id vehicula dolor iaculis. Donec eu libero pellentesque, efficitur tellus ac, pretium ex. Nulla interdum nisi eu ipsum porta, vitae maximus nisl fringilla.
Nullam lobortis elit arcu, quis vestibulum mauris auctor eget. Nunc blandit neque eget tellus faucibus laoreet. Suspendisse ullamcorper massa eu tortor tristique, non cursus urna volutpat. Phasellus eu interdum lacus. Mauris arcu risus, hendrerit
vitae nisl at, rhoncus porta ante. Sed ac arcu quis velit consectetur placerat et a arcu. Phasellus rutrum metus sodales velit ultrices, eu varius tellus sollicitudin. Praesent tincidunt justo pellentesque urna sollicitudin porta. In accumsan magna
id bibendum blandit. Aliquam fringilla felis in velit lobortis commodo et ac lectus. Vivamus eget ex a risus tempor consectetur. Phasellus molestie ligula lacus, ac imperdiet nulla fermentum non.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales lorem libero, a egestas enim faucibus non. Nullam tincidunt hendrerit faucibus. Vestibulum laoreet nulla in odio bibendum, vel facilisis ligula mattis. Proin a neque ullamcorper, bibendum
purus sit amet, vulputate elit. Curabitur hendrerit purus velit, varius luctus sem aliquam non. Aenean porttitor interdum orci, ac sodales lorem facilisis a. Etiam scelerisque nunc mauris, at gravida risus venenatis vel. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eget ligula pretium, iaculis nisi non, pretium risus. Duis eu accumsan erat. Aenean mollis ut dolor id tincidunt. Praesent in risus sit amet leo auctor venenatis. Etiam aliquam
quis nisl eu mollis. Pellentesque non diam sed neque finibus sollicitudin sed non neque. Sed vitae augue libero. Sed eu feugiat eros. Aliquam elementum feugiat arcu sed mattis. Nunc vestibulum sem nibh, sodales consequat arcu luctus ac. Ut tortor
turpis, ultrices quis pulvinar at, rutrum ut arcu. Integer dapibus erat ante, vitae laoreet est sagittis et. Sed feugiat scelerisque risus, a mattis justo placerat ac. Sed blandit lorem quis urna hendrerit, nec ultricies erat molestie. Vivamus tempor
sapien quis lacus bibendum tempor. Mauris lacinia interdum scelerisque. Vivamus at elit quis urna aliquet gravida eget a dui. Aenean et pharetra nisi, eget euismod augue. Duis mauris leo, convallis pretium nulla vitae, finibus porttitor diam. Cras
nisl massa, volutpat fringilla leo ac, dictum laoreet tortor. Donec rhoncus porta eleifend. Vivamus placerat tortor at ipsum volutpat, in mollis nulla facilisis. Aenean pharetra dui at convallis ultricies. Maecenas fringilla sit amet neque at facilisis.
In blandit, turpis eu aliquam lobortis, arcu nisl tempor tortor, nec tristique odio diam sed velit. Fusce luctus lectus neque, ac hendrerit massa hendrerit ac. Aenean diam tortor, volutpat in sollicitudin faucibus, congue ut quam. Donec fringilla
imperdiet eros vel auctor. Nulla quis risus placerat, commodo quam vitae, elementum lacus. Maecenas vulputate scelerisque diam, at ornare justo imperdiet non. In venenatis tortor eget ante semper, sed commodo purus posuere. Suspendisse lobortis
dapibus massa, at malesuada diam vestibulum a. Nam nisl sem, consequat non risus ultricies, consectetur varius massa. In nec nulla eget erat rutrum consectetur. Sed molestie rhoncus lorem quis finibus. Phasellus aliquet leo nec enim luctus facilisis.
Mauris sodales porta vehicula. Quisque pharetra, justo tincidunt pharetra aliquet, arcu mauris consequat turpis, ut commodo nisl odio nec urna. Sed faucibus elit a enim ullamcorper congue. Ut ultricies ante eu dolor facilisis aliquet. Sed odio ligula,
tristique ac auctor et, commodo ut tortor. Curabitur pellentesque metus nec libero auctor, id vehicula dolor iaculis. Donec eu libero pellentesque, efficitur tellus ac, pretium ex. Nulla interdum nisi eu ipsum porta, vitae maximus nisl fringilla.
Nullam lobortis elit arcu, quis vestibulum mauris auctor eget. Nunc blandit neque eget tellus faucibus laoreet. Suspendisse ullamcorper massa eu tortor tristique, non cursus urna volutpat. Phasellus eu interdum lacus. Mauris arcu risus, hendrerit
vitae nisl at, rhoncus porta ante. Sed ac arcu quis velit consectetur placerat et a arcu. Phasellus rutrum metus sodales velit ultrices, eu varius tellus sollicitudin. Praesent tincidunt justo pellentesque urna sollicitudin porta. In accumsan magna
id bibendum blandit. Aliquam fringilla felis in velit lobortis commodo et ac lectus. Vivamus eget ex a risus tempor consectetur. Phasellus molestie ligula lacus, ac imperdiet nulla fermentum non.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales lorem libero, a egestas enim faucibus non. Nullam tincidunt hendrerit faucibus. Vestibulum laoreet nulla in odio bibendum, vel facilisis ligula mattis. Proin a neque ullamcorper, bibendum
purus sit amet, vulputate elit. Curabitur hendrerit purus velit, varius luctus sem aliquam non. Aenean porttitor interdum orci, ac sodales lorem facilisis a. Etiam scelerisque nunc mauris, at gravida risus venenatis vel. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eget ligula pretium, iaculis nisi non, pretium risus. Duis eu accumsan erat. Aenean mollis ut dolor id tincidunt. Praesent in risus sit amet leo auctor venenatis. Etiam aliquam
quis nisl eu mollis. Pellentesque non diam sed neque finibus sollicitudin sed non neque. Sed vitae augue libero. Sed eu feugiat eros. Aliquam elementum feugiat arcu sed mattis. Nunc vestibulum sem nibh, sodales consequat arcu luctus ac. Ut tortor
turpis, ultrices quis pulvinar at, rutrum ut arcu. Integer dapibus erat ante, vitae laoreet est sagittis et. Sed feugiat scelerisque risus, a mattis justo placerat ac. Sed blandit lorem quis urna hendrerit, nec ultricies erat molestie. Vivamus tempor
sapien quis lacus bibendum tempor. Mauris lacinia interdum scelerisque. Vivamus at elit quis urna aliquet gravida eget a dui. Aenean et pharetra nisi, eget euismod augue. Duis mauris leo, convallis pretium nulla vitae, finibus porttitor diam. Cras
nisl massa, volutpat fringilla leo ac, dictum laoreet tortor. Donec rhoncus porta eleifend. Vivamus placerat tortor at ipsum volutpat, in mollis nulla facilisis. Aenean pharetra dui at convallis ultricies. Maecenas fringilla sit amet neque at facilisis.
In blandit, turpis eu aliquam lobortis, arcu nisl tempor tortor, nec tristique odio diam sed velit. Fusce luctus lectus neque, ac hendrerit massa hendrerit ac. Aenean diam tortor, volutpat in sollicitudin faucibus, congue ut quam. Donec fringilla
imperdiet eros vel auctor. Nulla quis risus placerat, commodo quam vitae, elementum lacus. Maecenas vulputate scelerisque diam, at ornare justo imperdiet non. In venenatis tortor eget ante semper, sed commodo purus posuere. Suspendisse lobortis
dapibus massa, at malesuada diam vestibulum a. Nam nisl sem, consequat non risus ultricies, consectetur varius massa. In nec nulla eget erat rutrum consectetur. Sed molestie rhoncus lorem quis finibus. Phasellus aliquet leo nec enim luctus facilisis.
Mauris sodales porta vehicula. Quisque pharetra, justo tincidunt pharetra aliquet, arcu mauris consequat turpis, ut commodo nisl odio nec urna. Sed faucibus elit a enim ullamcorper congue. Ut ultricies ante eu dolor facilisis aliquet. Sed odio ligula,
tristique ac auctor et, commodo ut tortor. Curabitur pellentesque metus nec libero auctor, id vehicula dolor iaculis. Donec eu libero pellentesque, efficitur tellus ac, pretium ex. Nulla interdum nisi eu ipsum porta, vitae maximus nisl fringilla.
Nullam lobortis elit arcu, quis vestibulum mauris auctor eget. Nunc blandit neque eget tellus faucibus laoreet. Suspendisse ullamcorper massa eu tortor tristique, non cursus urna volutpat. Phasellus eu interdum lacus. Mauris arcu risus, hendrerit
vitae nisl at, rhoncus porta ante. Sed ac arcu quis velit consectetur placerat et a arcu. Phasellus rutrum metus sodales velit ultrices, eu varius tellus sollicitudin. Praesent tincidunt justo pellentesque urna sollicitudin porta. In accumsan magna
id bibendum blandit. Aliquam fringilla felis in velit lobortis commodo et ac lectus. Vivamus eget ex a risus tempor consectetur. Phasellus molestie ligula lacus, ac imperdiet nulla fermentum non.
Внутри этого заголовка есть div цены, который мне нужен чтобы скрыть, когда пользователь прокручивает таблицу. Кроме того, я пытаюсь уменьшить высоту заголовка во время прокрутки, чтобы он не закрывал слишком большую часть содержимого таблицы ниже.
Приведенный код работает, скрывая div цены и уменьшение высоты заголовка. Однако эти изменения не происходят плавно, и я столкнулся с проблемой, когда вся таблица тряслась или тряслась при возникновении этих изменений, что приводило к ухудшению пользовательского опыта. Как мне сделать это плавно, чтобы цена плавно скрывалась, а высота заголовка уменьшалась максимально плавно?
Я добавил дополнительный текст (Lorem Ipsum ) здесь, чтобы продемонстрировать структуру страницы.
Заранее спасибо.
Подробнее здесь: https://stackoverflow.com/questions/784 ... ble-header
