Исправлена ​​боковая панель - липкая для нижнего колонтитула с использованием jQuery

Question

У меня есть JSFIDDLE, чтобы продемонстрировать макет страницы, с которой я работаю, но мне трудно достичь того, чего я хочу.

Если вы прокрутите основное содержимое до конца, вы увидите, что нижняя часть боковой панели соответствует верхней части нижнего колонтитула. Вот как следует всегда смотреть. Однако, если вы измените размер или прокрутите, вы увидите, что это не так.

После нескольких дней css fiddlings я пришел к выводу, что это можно сделать только с помощью js. Пожалуйста, предоставьте рабочий скрипт, особенно, если вы заявляете, что это может быть сделано с использованием только CSS, как и другие, в моем другом вопросе, который я не смог получить ни один из ответов на работу. Проблема со всеми предложенными ответами: position:fixed удаляется, а боковая панель прокручивается с основным содержимым, это не должно происходить.

Пожалуйста, помогите достичь желаемого эффекта

Answer 1

UPDATE:

Это, по-видимому, не может быть достигнуто на CSS только, вот решение JQuery.

var vh = $("body").height() - $("footer").height(); 
var sh = $("#side").height(); 

$(window).resize(function() { 
    vh = $("body").height() - $("footer").height(); 
    sh = $("#side").height(); 
}); 

$(document).scroll(function() { 
    var vs = $(document).scrollTop() + sh + $("footer").height(); 

    if(vs < vh) 
     $("#side").css("bottom", "0px"); 
    else 
     $("#side").css("bottom", (vs - vh) + "px"); 
}); 

Для тестирования используется jsFiddle.