即使在制作动画时也始终将条形图粘贴到页脚

最近在这里,我问了一个问题,就是将一个bar元素始终放在容器的左下角。 似乎不可能只使用CSS。 所以,我最终使用了javascript。 这是工作小提琴

提供上一个问题的亮点:

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

即使窗口resize,以上小提琴也可以正常工作并遵守上述所有情况。

现在,我有相同的情况,但容器将resize,因为动画按钮单击但不调整窗口大小。

因为,我动画了一秒钟,所以当我点击动画按钮时,我调用窗口resizefunction中的相同代码。 但这样做是某种程度上打破,并没有遵循上述规则/要求。

这是小提琴 。 ( 不工作

请帮忙。

PS:这是上一个问题的链接。 ( 如果有人想要简短的理解

再一次,我解决了它。 我让事情变得复杂。 只需要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聊天室给出了一个想法。

工作小提琴