Javascript 使div固定时防止动画跳转

我正在制作一个浮动div效果，当向下滚动时，div将移动到上下。问题是，当您向下滚动并单击按钮使div固定时，动画只是跳出了顺序。它应该更平滑地移动到旧位置

<div id="container">
  <button id="toggleFix" onclick="document.querySelector('#element').classList.toggle('fixed')">Make the div fixed</button>
  <div id="element"></div>
</div>

var el=document.querySelector（“#元素”），
elPos=el.getBoundingClientRect（）；
el.style.left=elPos.left+“px”；
el.style.right=elPos.right+“px”；
el.style.top=elPos.top+“px”；
el.style.bottom=elPos.bottom+“px”
正文{
高度：150vh；
}
#容器{
最大宽度：1200px；
保证金：自动；
}
#扳机{
边缘底部：1米；
字体大小：20px；
边界：无；
填充：10px 20px；
字体大小：粗体；
位置：固定；
右：20px；
底部：0；
}
#元素{
背景：黑色；
过渡：所有0.3秒缓解；
宽度：400px；
高度：300px；
}
#元素。固定{
位置：固定；
顶部：845px！重要；
左：10px！重要；
右：自动！重要；
底部：10px！重要；
宽度：200px！重要；
高度：150px！重要；
}

把潜水舱修好
当前，您正在将元素移出屏幕（
顶部：845px！重要
）

将其替换为
top:auto！重要信息
会将元素移动到左下角，即使在滚动时它也会留在那里

注意：这可能/将影响页面布局的其余部分。
为了有效地转换位置，必须至少设置四个位置中的一个（
顶部、左侧、右侧或底部）

另外，我认为你不需要JS。我在没有js的情况下实现了这一点



正文{
高度：150vh；
}
#扳机{
边缘底部：1米；
字体大小：20px；
边界：无；
填充：10px 20px；
字体大小：粗体；
位置：固定；
右：20px；
底部：0；
}
#元素{
位置：绝对位置；
顶部：8px；
左：450px；
背景：黑色；
宽度：400px；
高度：300px；
过渡：所有0.3秒缓解；
}
#元素。固定{
位置：固定；
顶部：845px；
左：10px；
右：自动；
底部：10px；
宽度：200px；
高度：150像素；
}

把潜水舱修好
您能更准确地解释一下按下按钮的结果吗？你的JS和CSS似乎互相矛盾。我只是想修复页面左下角的div，当删除使它成为页面的类时，这个类没有正确运行，但是动画是无序的，我想这是需要的。问题是，取回它的动画并不平滑。它只是跳转到这个位置，然后变大。我正在尝试解决这个自动取款机。谢谢，但是如果div在contaner中，页面会跳转呢again@Eli你能帮我澄清一下吗？我不明白你的意思。你想让元素完全消失，还是你想实现什么？我明白了，问题是，只要你改变
位置
-属性，元素就会脱离容器，跳转到相对位置，但是相对于主体，而不是容器。我将试着看看如何解决这个问题。我编辑了答案和答案。我使用了
position:absolute
将元素从容器中释放出来，但我不认为这符合您的利益。现在这是一个解决方法，但是如果出于任何原因依赖于容器，那么您必须再次查看它。
var el = document.querySelector("#element"),
elPos = el.getBoundingClientRect();

el.style.left = elPos.left + "px";
el.style.right = elPos.right + "px";
el.style.top = elPos.top + "px";
el.style.bottom = elPos.bottom + "px";