1

このページと全く同じことをしたいです。http://www.googleventures.com/

ページ下部を下にスライドすると視差効果が出てきます。画像をヘッダーとして使用するにはどうすればよいですか？純粋なjquery？onSlide機能はありますか？

4

2 に答える 2

4

私は別のオプションをしました。新しい要素は自動的にz-indexが高くなるため、z-indexも必要ありません。

HTML

<div class="fixed">
  <img src="http://placekitten.com/800/300" />
  This is some text that will be static as well
</div>
<div class="scroll">
  Lorem ipsum dolor sit amet
</div>​

CSS

.fixed{
    position: fixed;
}
.scroll{
    background: #eee;
    height: 700px;
    position: relative;
    top: 350px;        
}​

実例： http： //jsfiddle.net/3vxBA/

于 2012-05-16T19:33:05.147 に答える
3

これは、ヘッダーの位置が固定され、z-indexが低いように見えるため、定期的にスクロールすると、ページは上向きに続きますが、ヘッダーはメインコンテンツの後ろの同じ位置に留まります。

サンプルHTML：

<body>

<div id="header">
some image here
</div>

<div id="pagecontent">
everything else
</div>

</body>​

サンプルCSS：

body {
    padding-top: 100px; /* #header height */
}

#header {
    position: fixed;
    top: 0px;
    z-index: -1;
    background-color: #ccccff;
    height: 100px;
    width: 100%;
}

#pagecontent {
    background-color: #ccffcc;
    height: 1000px;
    width: 100%;
}​

これが実際の例です：http：//jsfiddle.net/Nv7Ku/

于 2012-05-16T19:32:13.437 に答える