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

Question

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

3

我正在开发一个 HTML 框架，其中大部分页面都由两个部分构成。第一部分 (TopPanel) 是一个可以上下滑动的滑动面板（也可以使用 jQuery）。第二部分是页面的 Main 部分，可以包含任何类型的 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部分的所有内容向下移动和向上移动，而不改变所有元素的属性。

- DarkMaze

3个回答

1

JSFIDDEL版本
(已更新) 请尝试：

$('.main').click(function(){
    $('.main').toggleClass('toggle');
})

.main{
    width:20%;
    height: 10%;
    background-color: rgba(100,100,100,0.7);
    text-align: center;
    position: fixed;
    top: 12%;
    transition:all 1.0s
}
.top{
    width: 20%;
    height: 10%;
    text-align: center;
    background-color: rgba(300,50,50,0.7);
    position: absolute;
}
.toggle{
    transform: translateY(100px);
    transition:all 1.0s
}

<div class="content">
    <div class="top">
        Top
    </div>
    <div class="main">
        Main
    </div>
</div>

它需要进行一些微调，但仍然可以实现您所需的功能。

- ThermalCube

0

我认为你可能在寻找的是这个：

我使用了JQuery UI 1.9.2来制作切换效果。更多信息请参见Fiddle JQuery

$("button").click(function(){
    $(".topPanel").toggleClass("height", 300);
    $(".main").toggleClass("top", 300);
});

CSS

body { margin:0; }

.topPanel
{
    width:100%;
    height:50px;
    background:#333;
}

.main
{
    top:50px;
    bottom:0px;
    width:100%;
    position:absolute;
    background:#ddd;
}

.height { height:100px; }

.top { top:100px; }

p { font-weight:bold; }

HTML

<div class="topPanel">

</div>
<div class="main">
    <center><button>Click Me!</button></center>
    <p>Hey look at me, i am moving along when you click button!</p>
</div>

- divy3993

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Djave · Accepted Answer

你有没有考虑在 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

但要注意这种情况：使用-webkit-transform时，固定位置不起作用