使div固定时防止动画跳转

Question

我正在制作一个浮动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>

js:

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";

https://codepen.io/anon/pen/ajWaaM

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";

body {
  height: 150vh;
}

#container {
  max-width: 1200px;
  margin: auto;
}

#toggleFix {
  margin-bottom: 1em;
  font-size: 20px;
  border: none;
  padding: 10px 20px;
  font-weight: bold;
  position: fixed;
  right: 20px;
  bottom: 0;
}

#element {
  background: black;
  transition: all 0.3s ease;
  width: 400px;
  height: 300px;
}

#element.fixed {
  position: fixed;
  top: 845px !important;
  left: 10px !important;
  right: auto !important;
  bottom: 10px !important;
  width: 200px !important;
  height: 150px !important;
}

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

Answer 1

为了有效地转换位置，必须至少设置四个位置中的一个（顶部、左侧、右侧或底部）。

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

这是可以玩的密码笔

body{
 height: 150vh; 
}
#toggleFix {
  margin-bottom: 1em;
  font-size: 20px;
  border: none;
  padding: 10px 20px;
  font-weight: bold;
  position: fixed;
  right: 20px;
  bottom: 0;
}
#element{
  position: absolute;
  top: 8px;
  left: 450px;
  background: black;
  width: 400px;
  height: 300px;
  transition: all 0.3s ease;
}
#element.fixed{
  position: fixed;
  top: 845px ;
  left: 10px ;
  right: auto ;
  bottom: 10px ;
  width: 200px ;
  height: 150px ;
}

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

Answer 2

当前，您正在将元素移出屏幕（top:845px！important）。

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

注意：这可能/将影响页面布局的其余部分。