Javascript HTML中的下移/上移位置固定元素_Javascript_Jquery_Html_Css

Javascript HTML中的下移/上移位置固定元素

javascript jquery html css

Javascript HTML中的下移/上移位置固定元素,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在开发一个HTML框架，它的大部分页面都是由两个部分构成的。第一部分（TopPanel）是一个滑动面板，可以向下或向上滑动（也可以使用jQuery）。第二部分是页面的主部分，它可以包含任何类型的HTML文档 <!doctype html> <html> <head>  </head> <body> <div class="TopPanel">

我正在开发一个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部分中固定的元素。所以很明显，除非我们给他们一些margintop:[$（'.TopPanel'）.height（）]px，否则他们不会移动。但这不是我要照顾的
我正在寻找一种方法，可以使Main部分的所有内容向下和向上移动，效果平滑，并且不改变所有元素的属性。
您是否考虑过在body
标记上使用CSStransform:translateY（20px）
？如果在另一个元素上使用固定位置，它实际上不会影响它，尽管我还没有测试过
然后，可以使用过渡来获得所需的平滑移动
body{
  padding:10px;
  overflow:hidden;
  background:#fff;
  height:100%;
  transition:all .2s;
}

body.active{
  transform: translateY(60px);
}

例如：

但是要注意这类东西：
版本

（已更新）请尝试以下操作：

$（'.main'）。单击（函数（）{
$（'.main'）.toggleClass（'toggle'）；
})
.main{
宽度：20%；
身高：10%；
背景色：rgba（100100,0.7）；
文本对齐：居中；
位置：固定；
最高：12%；
转换：所有1.0
}
.顶{
宽度：20%；
身高：10%；
文本对齐：居中；
背景色：rgba（300,50,50,0.7）；
位置：绝对位置；
}
.切换{
变换：translateY（100px）；
转换：所有1.0
}

顶部
主要
我想你要找的可能是：
我使用jQueryUI1.9.2来实现切换轻松效果。更多信息，我创建了
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>


点击我！
嘿，看着我，当你们点击按钮时，我正在向前移动
相同的想法：D我们中的一个应该删除答案，因为它们都是相同的？有趣的答案！但改变身体也会导致托帕内尔向下移动。如何保持TopPanel位置？位置：固定top:-200px；
），code>和负高度为top
）解决了问题！塔克斯