Question

如果我为我的文档的body设置动画

$('body').animate({'margin-left': '500px'});

我的所有固定元素都不会移动：

.box {
    position: fixed;
    top: 50%;
    left: 0;
    background: red;
    height: 100px;
    width: 100px;
}

如果我希望文档中的所有内容都移动，我是否需要独立于身体移动固定元素，或者我是否可以将元素固定在身体上？

Answer 1

固定定位元素的工作原理 - 它们相对于视口定位。

请参阅CSS 2.1 specification：

固定定位是绝对定位的子类别。唯一的区别是，对于固定定位的框，包含块由视口建立。对于连续介质，滚动文档时固定框不会移动。在这方面，它们类似于固定的背景图像。

您也可以为固定元素的left或margin-left属性设置动画。

Answer 2

尝试使用$('*').animate({'margin-left': '500px','left': '500px'});。 *选择器匹配一切。

Answer 3

您可以将fixed元素更改为absolute定位，将body元素更改为relative定位。

这样，所有元素都将相对于正文移动：

$('body').animate({'margin-left': '500px'});

body, html {
  position: relative;
  height: 100%;
  font-size: 30px;
}

.box {
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
  height: 100px;
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
</div>
<p>
  Lorem ipsum &hellip;
</p>

用固定元素移动身体

3 个答案: