Q:

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 Working Fiddle
Giving highlights of the previous question:

Stick the bar element to bottom-left of the container
The bar should be in bottom-left, even the container is scrolled vertically or horizontally.
The bar should come over the horizontal scrollbar, if the horizontal scrollbar is present.

The above fiddle works fine and obeys all above cases, even when the window is resized.
Now, I have the same situation but the container will get resized because of animation button click but not window resize. 
Since, I am animating for one second, I am calling the same code present in the window resize function while I clicked on the animating button. But doing so is somehow breaking and isn't following the above rules/requirements.
Here is the Fiddle. (not working)
Please help.
PS: Here is the link to previous question. (if someone wants brief understanding)

A:

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

