gpt4 book ai didi

javascript - 在 HTML 中向下/向上移动位置固定元素

转载 作者:行者123 更新时间:2023-11-30 12:23:11 24 4
gpt4 key购买 nike

我正在开发一个 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com