0

私がやろうとしていることは、説明するのが少し難しいです。ウィンドウの高さの 100% になり、Web サイトのメイン コンテンツの上に重ねられる「パネル」が必要です。私がやりたいことは、メインの Web サイトのコンテンツをブラウザー ウィンドウの上部にロックし、その上にこの「パネル」を配置することです。この部分は z-index を使うだけで簡単です。私が抱えている問題は、サイトのメイン コンテンツがブラウザ ウィンドウの上部に固定されたままになることです。ユーザーが下にスクロールすると、「パネル」のみが上にスライドして、その下の Web サイトの主要部分が表示されます。パネルがブラウザー ウィンドウの上部をクリアしたら、サイトの主要部分を通常どおりスクロールします。これをjQueryで駆動したいと思います。

私が持っているHTMLは次のとおりです。

これは、ユーザーが下にスクロールしたときにメイン コンテンツの上にスライドする必要があるオーバーレイです。当サイトのメインコンテンツです。

そしていくつかの CSS:

html, body {height:100%;}

.panel {height:100%; background-color: rgba(186,85,85,0.38); position: relative; z-index:1;}

.main {position: absolute; top:0px; min-height: 1500px;}

編集: この効果は、ステージに上がるカーテンのようなものと考えてください。幕が上がる間、舞台はその場にとどまります。

4

3 に答える 3

0

この問題を非常に単純な観点から見ると、position: fixed他の人がスクロールしている間にメインコンテンツの Web サイトを修正できます。

于 2012-10-28T04:22:00.777 に答える
0

ダスティン

スクロール カーテンについての言及に基づいて、メイン コンテンツ領域の上に高さ 100% の div を配置して、ページをスクロールするとコンテンツが表示されるようにしました。あなたが探している固定領域について確信が持てなかったので、ページの上部に固定 div を配置しました。「カーテン」が完全に上がったら、その div のスクロールを開始したい場合は、スクロール位置に基づいて addclass を調べることをお勧めします。残念ながら、Jquery に詳しい人に尋ねる必要があります。それを手伝ってください。

CSS :

html, body
{
height: 100%;
background-color: yellow;
}

#curtain {
height: 100%;
width: 500px;
background-color: red;
display: block;
}

#content {
width: 500px;
background-color: blue;
}

#both {
height: 100%;
width: 500px;
margin-left: auto;
margin-right: auto;
}

#sticky_content {
position: fixed;
top: 0px;
left: 50%;
width: 200px;
background-color: green;
}

HTML :

<div id="both">
<div id="sticky_content">This Sticks</div>
<div id="curtain">Text?</div>
<div id="content">This is where the main page body content would go...</div>
</div>

これが私がまとめたJsFiddleです。カーテンは赤、コンテンツ領域は青、粘着領域は緑で区別を明確にしています。

-マルカテチュラ

于 2012-10-28T07:18:58.933 に答える
0

私を助けてくれてありがとう。私はかなり良い解決策を見つけたと思います。便宜上、Curtain.js と名付けられたものを見つけました。https://github.com/Victa/curtain.jsこのプラグインは、私が探していたものとまったく同じ効果を生み出します:)

于 2012-10-28T13:55:22.373 に答える