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

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

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

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

css:

.block {
	position: sticky; 
	top: 0;
}

js:

function moveBlock () {
	if (block = document.getElementById('block')) {
		if (block.clientHeight > window.innerHeight) {
			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.

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

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

Есть вопросы или нашли ошибку? Напишите комментарий (можно без регистрации), отвечать стараюсь быстро.