2

ここでヘッダー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側でこれを行う方法がわかりません。何か案は？

ありがとう、ハリソン

4

2 に答える 2

2

ここにそれをやっているフィドルがあります（何も派手ではなく、主に位置で遊んでいます：固定;そして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;
}
于 2013-02-22T00:14:33.100 に答える
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

于 2013-02-22T00:38:24.850 に答える