我正在开发一个 HTML 框架，它的大部分页面由两部分构成。第一部分 (TopPanel) 是一个可以向下或向上滑动的滑动面板(也可以使用 jQuery)。第二部分是页面的主要部分，可以包含任何类型的 HTML 文档。
<!doctype html>
<html>
<head>
<!--Meta scripts & more-->
</head>
<body>
<div class="TopPanel">
<!--Panel's Contents-->
</div>
<div class="Main">
<!--Some standard HTML docs here-->
</div>
</body>
</html>
TopPanel 向下滑动时，Main 部分的所有元素都必须向下滑动。但是 Main 部分中可能存在一些 position:fixed 元素。所以很明显它们不会移动，除非我们给它们一些 margin-top: [$('.TopPanel').height()] px;。但这不是我要照顾的!
我正在寻找一种方法来向下移动和向上移动 Main 部分的所有内容，并且效果平滑且不更改所有元素属性。
最佳答案
您是否考虑过在 body 标签上使用 CSS transform:translateY(20px)？如果您在另一个元素上使用固定位置，它实际上应该不会影响它，尽管我还没有测试过。
然后您可以使用过渡来获得您想要的平滑运动。
body{
padding:10px;
overflow:hidden;
background:#fff;
height:100%;
transition:all .2s;
}
body.active{
transform: translateY(60px);
}
例子:
http://codepen.io/EightArmsHQ/pen/gpwPPo
注意这类东西:Positions fixed doesn't work when using -webkit-transform
关于javascript - 在 HTML 中向下/向上移动位置固定元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30355116/