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使用绝对位置，但是容器将无用。不幸的是，这是我目前使它起作用的唯一方法。为了进一步解决，我必须更深入地研究它。

固定div时防止动画跳跃

2 个答案: