javascript - 即使在制作动画时也始终将栏粘贴到页脚

Question

最近在这里，我提出了一个问题，即始终将 bar 元素粘贴到容器的左下角。仅使用 css 似乎是不可能的。所以，我最终使用了 javascript。这是 Working Fiddle

给出上一个问题的亮点:

• 将 bar 元素粘贴到容器的左下角
• 栏应该在左下角，即使容器是垂直或水平滚动的。
• 如果存在水平滚动条，则该条应位于水平滚动条上方。

上面的 fiddle 工作正常并且遵守上述所有情况，即使在调整窗口大小时也是如此。

现在，我遇到了同样的情况，但容器的大小会因为动画按钮的点击而不是窗口的大小调整而调整。

因为我正在制作一秒钟的动画，所以我在单击动画按钮时调用窗口调整大小函数中存在的相同代码。但这样做在某种程度上违反了上述规则/要求。

这是 Fiddle . (不工作)

请帮忙。

PS:这是previous question的链接. (如果有人想要简要了解)

Answer 1

再次，我解决了它。我让事情变得复杂了。在只需要 bottom 属性的地方，我使用了 top 并重置了它。代码中有很多不必要的操作。

这是代码，运行良好。

$(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');
});

感谢 rlemon 在 javascript chat room 中提出想法.

Working Fiddle