Question

我正在为自己创建一个小的html文件，只是为了尝试一些新的东西。到目前为止，我有一个标题，背景和内容的中心区域。它位于中心，位置设置为固定。

我想这样做，当有人向下滚动时，中心区域会向上移动。所以顶部不会有大的空白区域。此外，当它们向上滚动时，中心靠近顶部，它不会超过标题。

我确信这可以通过JavaScript完成。但是，我不太清楚如何。

如果不清楚，我很抱歉。

Answer 1

我建议使用jquery来完成此任务。

您可以将事件侦听器绑定到scroll事件，处理程序将传递event object，其中包含您获得所需结果所需的所有信息（scrolltop，pageX，pageY等等... 。）

捕获滚动事件后，您可以告诉用户滚动到哪里（向下多远），并相应地定位div。

http://api.jquery.com/scroll/

Answer 2

这可以使用javascript或Jquery来实现（Jquery是两者中最容易的）。

1。）使用任意像素来定义div应该移动的时间。

function scrolling() {
if ($(body).scrollTop() > 120px)
    {
    ....perform div transition...
    }
}

或

2。）使用目标div的位置来定义div应该移动的时间。

function scrolling() { if ($(body).scrollTop() > $("#TargetDiv").offset().top;) { ....perform div transition... } }

如果您使用第二个解决方案，请确保在加载DOM之后，即在</body>之后调用Jquery和此脚本 。否则它将无法定义#TargetDiv。

Answer 3

这可以在不使用jquery或javascript的情况下完成，如果你想做我认为你的事情。 http://jsfiddle.net/wN8c8/ 通过将您的内容设置为固定大小并将内容设置为overflow：auto; 同样，您也可以将页面背景附件设置为固定，并创建文本“显示”而不移动页面的错觉。你当然可以使用脚本更深入地了解它，但这实际上取决于你的意图。

z-index还允许您在图层中构建页面，以便您可以确定哪些节目以及隐藏在其他页面元素后面的内容。

body {
   background-color:yellow;
}
#header{
   position:fixed;
   width: 100%;
   height:20px;
   background-color:red;
   z-index:2;
}
#content{
   position:fixed;
   width:80%;
   height:60%;
   background-color:#ddd;
   overflow:auto;
   margin:0px 10%;
   z-index:1;
} 


<div id="header"></div>
<div id="content">
   This is some content.<br/>
   This is some content.<br/>
   This is some content.<br/>
</div>

如何在向下滚动时向上移动div

3 个答案: