Stick The Bar Always To Footer Even While Animating

Recently here, I asked a question to stick a bar element always to bottom-left of the container. It seems not possible using just css. So, I ended up using javascript. Here is the

Solution 1:

Again, I solved it. I was making things complicated. Where there was need of only bottom property, I was using top and resetting it. Lots of unneccessary action in the code.

Here is the code, which is working fine.

$(function () {
    $('.content').width($('body').width() - 50);
});

var stickToBottom = function (parent) {
    var bar = parent.querySelector('.bar');
    var top = bar.offsetTop;
    parent.addEventListener('scroll', function (e) {
        var el = e.currentTarget;
        bar.style.bottom = -el.scrollTop + "px";
        bar.style.left = el.scrollLeft + "px";
    });
}
var parent = document.querySelector('.parent');
stickToBottom(parent);

$('.clickme').click(function () {
    $(this).toggleClass('active');
});

Thanks to rlemon for giving a idea in javascript chat room.

Working Fiddle