Исправление фиксированных объектов в нижних колонтитулах страницы

Распространенная проблема, связанная с прокруткой фиксированных объектов в нижних колонтитулах, имеет простое решение. Например, давайте рассмотрим фиксированное поле «Поделиться» в левом нижнем углу экрана. Чтобы предотвратить перекрытие нижнего колонтитула, мы остановим его примерно на 10 пикселей выше нижнего колонтитула.

Во-первых, нам нужно определить близость поля к нижнему колонтитулу каждый раз при прокрутке страницы:

$(document).scroll(function() {
    checkOffset();
});

Если поле окажется слишком близко к нижнему колонтитулу (т. е. в пределах 10 пикселей), мы изменим его положение на абсолютное:

function checkOffset() {
    if($('#social-float').offset().top   $('#social-float').height() 
                                           >= $('#footer').offset().top - 10)
        $('#social-float').css('position', 'absolute');
    if($(document).scrollTop()   window.innerHeight 
Обратите внимание, что родительский элемент #social-float должен быть родственным по отношению к нижнему колонтитулу в структуре HTML.