即使在动画制作时，仍然将栏杆粘到页脚 [英] Stick the bar always to footer even while animating

问题描述

最近在这里，我问一个问题，一个 bar 元素总是在容器的左下角。似乎不可能使用只是css。所以，我最终使用javascript。这是 工作小提琴

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:

• 将bar元素粘贴到容器的左下角


• 条应该在左下角，即使容器是垂直或水平滚动。


• 如果水平滚动条存在，条应该越过水平滚动条。

上述小提琴运行正常，并遵守所有上述情况，即使窗口已调整大小。

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.

这里是小提琴。 （不工作）

请帮助。

以上一个问题。 ）

推荐答案

再次，我解决了这个问题。我使事情变得复杂。如果只需要底部属性，我使用顶部并重置它。

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

$ b。 com / transcript / message / 24355500＃24355500> javascript聊天室。

工作小提琴

这篇关于即使在动画制作时，仍然将栏杆粘到页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！