Выполнить »
×
Изменить ориентацию
Открыть на Codepen
Изменить тему, Темная/Светлая
<!DOCTYPE html> <html> <head> <style> div.sticky { position: -webkit-sticky; position: sticky; top: 0; padding: 5px; background-color: #cae8ca; border: 2px solid #4CAF50; } </style> </head> <body> <p>Попробуйте <b>прокрутить</b> внутри этого фрейма, чтобы понять, как работает липкое позиционирование.</p> <div class="sticky">Я липкий!</div> <div style="padding-bottom:2000px"> <p>В этом примере липкий элемент прикрепляется к верхней части страницы (вверху: 0), когда вы достигаете его позиции прокрутки.</p> <p>Прокрутите назад, чтобы удалить прилипание.</p> <p>Текст для прокрутки.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Текст для прокрутки.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> </div> </body> </html>
