修复 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

目前您正在将元素移出屏幕 (top: 845px !important)。

将其替换为top: auto !important 会将元素移动到左下角并且即使在滚动时它也会保留在那里。

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

Answer 2

为了有效地transition 位置，您必须至少设置四个位置之一 (top,left,right or bottom)。

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

Here's the CodePen to play with

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

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

编辑：您可以为您的 div 使用绝对位置，但这样容器将毫无用处。不幸的是，这是我目前让它工作的唯一方法。为了进一步解决，我必须更深入地研究它。