Question

我正在开发一个HTML框架，其大部分页面都是从两个部分构建的。第一部分（ TopPanel ）是一个滑动面板，可以向下或向上滑动（也可以使用hash）。第二部分是页面的 Main 部分，可以包含任何类型的HTML文档。

jQuery

当 TopPanel 向下滑动时， Main 部分的所有元素都必须向下移动。但是可以在 Main 部分中存在一些<!doctype html> <html> <head>  </head> <body> <div class="TopPanel">  </div> <div class="Main">  </div> </body> </html>元素。所以很明显，除非我们给他们一些position:fixed，否则他们不会动。但这不是我正在照顾的事情！

我正在寻找一种方法来降低和提升 Main 部分的所有内容，并且效果平滑且不会更改所有元素属性。

Answer 1

您是否考虑在transform:translateY(20px)代码上使用CSS body？如果你在另一个元素上使用固定位置，它实际上不应该影响它，尽管我还没有测试过它。

然后，您可以使用过渡来获得您想要的平滑动作。

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

Answer 2

JSFIDDEL版本
（更新）试试这个：

＆＃13;

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

＆＃13;

.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
}

＆＃13;

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

＆＃13;

这需要一些调整，但它仍然可以满足您的需求。

Answer 3

我认为你正在寻找的可能就是这样：

我使用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>

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

3 个答案: