html - 创建一个向下滚动时消失/缩小的 div？

Question

我有兴趣在这里创建类似于标题 div 的内容：http: //abduzeedo.com/brainstorm-9-logo-process

我知道 html 看起来有点像这样：

<div class="menu">
    <!--Fixed menu-->
</div>

<div class="headerimg">
    <!--Image that would disapear-->
</div>

<div class="content">
    <!--Content stuff here-->
</div>

但我不确定如何在 jQuery/CSS 方面做到这一点。有任何想法吗？

谢谢，哈里森

Answer 1

这是一个小提琴（没什么花哨的，主要是玩位置：固定；和z-index。）：http: //jsfiddle.net/zrYTm/7/

HTML：

<div class="menu"> Lorem ipsum dolor...</div>

<div class="headerimg"> Sed aliquam, lectus...</div>

<div class="content"> Fusce at neque...</div>

CSS：

.menu {
    position: fixed;
    z-index: 1000000; /* highest z-index on page */

    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: red;
}

.headerimg {
    position: fixed;
    z-index: 0; /* Lowest z-index */

    top: 100px;
    left: 0;
    right: 0;
    height: 100px;
    background-color: green;
}

.content {
    position: relative;
    z-index: 1000; /* Medium z-index */

    margin-top: 200px; /* Heigth of header and menu */

    height: 1000px;
    background-color: blue;
}

div {
    overflow: hidden;
}

Answer 2

使用您的 html，这里是 css：

 .menu, .headerimg, .content {
    width: 100%;
}
.menu {
    background: red;
    height: 50px;
    position: fixed;
    top: 0;
}
.headerimg {
    background: yellow;
    height: 100px;
    position: fixed;
    top:50px;
    z-index: -2;
}
.content {
    height: 1000px;
    background: gray;
    z-index:50;
    margin-top: 160px;
}

现在要让.headerimg滚动速度慢于.content，请使用 Jquery

$(document).ready(function() {
window.onscroll = function () {
    n = Math.ceil($("body").scrollTop() / 4);
    $(".headerimg").css("-webkit-transform", "translateY(-" + n + "px)");
    $(".headerimg").delay(1300).css("-moz-transform", "translateY(-" + n + "px)");

}
})

http://jsfiddle.net/akurtula/3w9Dv/1