javascript - 如何使用 jquery 创建类似 sevenly.org 的设计

Question

我有 javascript 和 jquery 的基础知识。我想实现像 Sevenly 这样的设计这就像一个页面/div 在另一个页面上移动，但我不知道如何开始。让我知道是否有人对如何实现这个有想法？

Answer 1

如果第一个容器具有特定高度，那么我认为最直接的解决方案是固定第一个容器 (position:fixed)。然后向其余部分添加 margin-top 以将其余部分向下推，使其从第一个容器下方开始:

HTML:

<div id="header">Header</div>
<div id="rest">
    <div>Other 1</div>
    <div>Other 2</div>
    <div>Other 3</div>
</div>

CSS:

div#header{ 
    position:absolute;
    position:fixed;
    width: 100%;
    height:150px;
    border: 2px dashed yellow; 
    background-color: lightyellow; 
}
div#rest{
    margin-top:150px;
    position:relative;
}  
div#rest div{    
    height: 300px;
    border: 2px dashed green;
    background-color: lightgreen;
} 

position:absolute; 适用于不支持 fixed 的浏览器。将其设置为绝对值会使其表现得像固定的一样，除了它会与页面的其余部分一起滚动。其余部分的 position:relative; 是因为 z-stacking。 fixed-ing header container 导致它被放在它自己的层中，在其他所有东西之上；将 rest 设置为 relative 会将 rest 再次放在标题的顶部。

See jsfiddle demo here .

如果标题上没有特定的高度，那么您可能需要使用 javascript。