position: sticky; фиксация за низ блока

64
Алексей,

Чаще это свойство используют для "шапок" сайта, но если вы укажете position: sticky; top: 0; блоку, который больше высоты экрана, то часть его контента не будет доступна, пока вы не доскроллите до конца родительского блока.

Чаще это свойство используют для "шапок" сайта, но если вы укажете position: sticky; top: 0; блоку, который больше высоты экрана, то часть его контента не будет доступна, пока вы не доскроллите до конца родительского блока.

Решение простое, нужно сделать отрицательный отступ сверху top: calc(100vh - 777px);, где 777 высота блока (её, к сожалению, придется высчитывать на js)

У меня это работает так:

css:
.block {
	position: sticky; 
	top: 0;
}
js:
function moveBlock () {
	if (block = document.getElementById('block')) {
		block.style = 'top: calc(100vh - ' + block.clientHeight + 'px)';
	}
}

moveBlock();
window.onload = function() {
	moveBlock();
};
window.addEventListener('resize', function(event) {
	moveBlock();
}, true);

Пример 1, top: -130px

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias commodi deserunt doloribus dolorum eius eligendi enim fugiat hic ipsa, itaque odio praesentium quas quasi quis quo repudiandae sit, soluta tenetur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias commodi deserunt doloribus dolorum eius eligendi enim fugiat hic ipsa, itaque odio praesentium quas quasi quis quo repudiandae sit, soluta tenetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias commodi deserunt doloribus dolorum eius eligendi enim fugiat hic ipsa, itaque odio praesentium quas quasi quis quo repudiandae sit, soluta tenetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias commodi deserunt doloribus dolorum eius eligendi enim fugiat hic ipsa, itaque odio praesentium quas quasi quis quo repudiandae sit, soluta tenetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias commodi deserunt doloribus dolorum eius eligendi enim fugiat hic ipsa, itaque odio praesentium quas quasi quis quo repudiandae sit, soluta tenetur.

Пример 2, top: 0px

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias commodi deserunt doloribus dolorum eius eligendi enim fugiat hic ipsa, itaque odio praesentium quas quasi quis quo repudiandae sit, soluta tenetur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias commodi deserunt doloribus dolorum eius eligendi enim fugiat hic ipsa, itaque odio praesentium quas quasi quis quo repudiandae sit, soluta tenetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias commodi deserunt doloribus dolorum eius eligendi enim fugiat hic ipsa, itaque odio praesentium quas quasi quis quo repudiandae sit, soluta tenetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias commodi deserunt doloribus dolorum eius eligendi enim fugiat hic ipsa, itaque odio praesentium quas quasi quis quo repudiandae sit, soluta tenetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias commodi deserunt doloribus dolorum eius eligendi enim fugiat hic ipsa, itaque odio praesentium quas quasi quis quo repudiandae sit, soluta tenetur.

Во втором примере левый "sticky" блок не прочитать полностью пока не "доскроллил" до конца правый, как раз эту проблему и решает отрицательный отступ (пример 1).

Опубликовано 20 октября 2021 | Обновлено 22 октября 2021
верстка, css
Поделиться
Похожие статьи
Стилизация scrollbar в css
Простая стилизация скроллбара в webkit браузерах и firefox. Т.е. работает во всех современных браузе...
Читать дальше » 0
Алексей,
Трансформирование бургера в крестик на css
Пример кода для кнопки открытия меню.
Читать дальше » 0
Алексей,
Комментарии
Авторизуйтесь чтобы получать уведомления об ответе
Чаще это свойство используют для "шапок" сайта, но если вы укажете position: sticky; top: 0; блоку, который больше высоты экрана, то часть его контента не будет доступна, пока вы не доскроллите до конца родительского блока.