（例えばスペシャルと重要な告知など）倍見出しの重要な情報利用者への優れたソリューションを提供します。この効果を作成する多くの開発者は、しかし、より簡単に純粋なCSSを使用してヘッダーの効果を折りたたみ作成することができますは、JavaScriptに依存しています。
タイトルと折りたたまれた視差効果と類似。背景には、ときに、ユーザーがスクロールページダウン、その内容はトップ下に流すことができるように、固定のタイトルの遺骨を折ら。このチュートリアルでは、効果を折る方法を以下のタイトルを作成する方法を紹介します：
デモは、3つの部分から構成されています。
- メインメニューを含むページの最上部、で、黒の背景にタイトルを修正しました。
- スペシャルに関する追加情報が含まれている青色の背景、とのタイトルを折ります。
- ユーザーがスクロールは、折り畳まれたタイトルで白い背景の上に置きました。
タイトルは、ユーザーエクスペリエンスを折るのに最適です。ユーザーは、いつでもページの特定の情報をバック見たい任意の時間にスクロールすることができますが、残りの部分を読みながら気を取られることはありません。フロントエンドの学習qun438905713を作成し、グループのほとんどは、ゼロベースの学習者である、私たちはお互いにお答えし、また学習教材の多くを準備するために、お互いを助けるには、為替のゼロベースのジュニアパートナーを歓迎しました。
今、私たちは折り畳まタイトルを作成する方法についての理解を開発してみましょう。
HTMLを作成します。1.
：HTMLは、3つの主要部分から構成され、<ヘッダ>トップメニューバーを固定する、.bannerながら、タイトルを折り畳む.articleコンテンツの残りの部分。コードは次の通り：
<span style="color:#273238"><span style="color:#cccccc"><span style="color:#81a2be">< <span style="color:#f0c674">DIV </span> 类 = <span style="color:#b5bd68">“容器”</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">报头</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">NAV</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">UL </span> 类 = <span style="color:#b5bd68">“菜单”</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">李</span> 类 = <span style="color:#b5bd68">“标志”</span> > </span><span style="color:#81a2be">< <span style="color:#f0c674">一个</span> HREF = <span style="color:#b5bd68">“＃”</span> ></span>开发及设计<span style="color:#81a2be"></ <span style="color:#f0c674">一</span> > </span><span style="color:#81a2be"></ <span style="color:#f0c674">李</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">李</span> > </span><span style="color:#81a2be">< <span style="color:#f0c674">一个</span> HREF = <span style="color:#b5bd68">“＃”</span> ></span>主页<span style="color:#81a2be"></ <span style="color:#f0c674">一</span> > </span><span style="color:#81a2be"></ <span style="color:#f0c674">li</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">li</span> ></span><span style="color:#81a2be">< <span style="color:#f0c674">一个</span> HREF = <span style="color:#b5bd68">“＃”</span> ></span>博客<span style="color:#81a2be"></ <span style="color:#f0c674">一</span> > </span><span style="color:#81a2be"></ <span style="color:#f0c674">李</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">李</span> > </span><span style="color:#81a2be">< <span style="color:#f0c674">一个</span> HREF = <span style="color:#b5bd68">“＃”</span> ></span>关于<span style="color:#81a2be"></ <span style="color:#f0c674">一</span> > </span><span style="color:#81a2be"></ <span style="color:#f0c674">李</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">李</span> > </span><span style="color:#81a2be">< <span style="color:#f0c674">一个</span> HREF = <span style="color:#b5bd68">“＃”</span> ></span>联系<span style="color:#81a2be">< / <span style="color:#f0c674">a</span> > </span><span style="color:#81a2be"></ <span style="color:#f0c674">li</span> > </span> <span style="color:#81a2be"></ <span style="color:#f0c674">ul</span> > </span> <span style="color:#81a2be"></ <span style="color:#f0c674">nav</span> > </span> <span style="color:#81a2be"></ <span style="color:#f0c674">标头</span> ></span> <span style="color:#81a2be">< <span style="color:#f0c674">div </span> 类= <span style="color:#b5bd68">“ banner”</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">div</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">h2 </span> class = <span style="color:#b5bd68">“ banner-title”</span> ></span>不要错过我们的下一个网络研讨会<span style="color:#81a2be"></ <span style="color:#f0c674">h2</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">p </span> class = <span style="color:#b5bd68">“ banner-desc”</span> ></span>立即注册并免费选择一本电子书<span style="color:#81a2be"></ <span style="color:#f0c674">p</span> > </span> <span style="color:#81a2be"></ <span style="color:#f0c674">div</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">button </span> class = <span style="color:#b5bd68">“ btn-signup” </span> type = <span style="color:#b5bd68">“ button” </span> onclick = <span style="color:#b5bd68">“ location.href ='＃'”</span> ></span> 前往网络研讨会» <span style="color:#81a2be"></ <span style="color:#f0c674">button</span> > </span> <span style="color:#81a2be"></ <span style="color:#f0c674">div</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">article </span> class = <span style="color:#b5bd68">“ article”</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">p</span> ></span> ... <span style="color:#81a2be"></ <span style="color:#f0c674">p</span> > </span> <span style="color:#81a2be"></ <span style="color:#f0c674">article</span> > </span> <span style="color:#81a2be"></ <span style="color:#f0c674">div</span> ></span></span></span>2. CSSが基本的なスタイルを追加します
：のような、いくつかのCSSリセットと基本的なスタイルを定義することで、レッツ・スタート
<span style="color:#273238"><span style="color:#cccccc">* { <span style="color:#b294bb">box-sizing</span>：border-box; <span style="color:#b294bb">边距</span>：<span style="color:#cc6666">0</span> ; <span style="color:#b294bb">填充</span>：<span style="color:#cc6666">0</span> ; <span style="color:#b294bb">字体家族</span>：sans-serif; <span style="color:#b294bb">颜色</span>：<span style="color:#cc6666">＃222</span> ; } <span style="color:#81a2be">a</span> { <span style="color:#b294bb">文本修饰</span>：无； } <span style="color:#81a2be">ul</span> { <span style="color:#b294bb">list-style-type</span>：none; }</span></span>3.トップメニューバー
ページの上部に配置された固定されたメニューバーにあなたがする必要があり、<ヘッダ>要素の位置が設定されているに固定、およびz屈折率がゼロよりも大きい値に設定されています。以来Zインデックスのデフォルトオート、それが唯一の親要素よりも高くなければならないのzインデックス値。以下CSS使用99を、それがより高くなる可能性があるため、<ヘッダ>要素の任意の親：
<span style="color:#273238"><span style="color:#cccccc"><span style="color:#81a2be">标头</span> { <span style="color:#b294bb">高度</span>：<span style="color:#cc6666">70像素</span> ; <span style="color:#b294bb">背景</span>：<span style="color:#cc6666">＃222</span> ; <span style="color:#b294bb">位置</span>：固定； <span style="color:#b294bb">宽度</span>：<span style="color:#cc6666">100％</span> ; <span style="color:#b294bb">z索引</span>：<span style="color:#cc6666">99</span>； }</span></span>Zインデックス：99; ルールはタイトルが完全に折り畳まれても、ページの最上部に到達するために、残りを折られても、すべての要素の上に滞在するために上部のメニューバーを可能にします。
4.設定メニュースタイル
折り目タイトルを作成するには、次のCSSルールは必要ありませんが、あなたは、トップメニューモードのスタイルを設定することができますが。
<span style="color:#273238"><span style="color:#cccccc"><span style="color:#81a2be">导航</span> { <span style="color:#b294bb">高度</span>：继承; } <span style="color:#de935f">.menu</span> { <span style="color:#b294bb">display</span>：flex; <span style="color:#b294bb">高度</span>：继承； <span style="color:#b294bb">align-items</span>：中心; <span style="color:#b294bb">填充</span>：<span style="color:#cc6666">0 </span> <span style="color:#cc6666">20px</span> ; } <span style="color:#de935f">.menu </span> <span style="color:#81a2be">li</span> { <span style="color:#b294bb">padding</span>：<span style="color:#cc6666">0 </span> <span style="color:#cc6666">10px</span> ; } <span style="color:#de935f">.menu </span> <span style="color:#81a2be">a</span> { <span style="color:#b294bb">颜色</span>：白色； } <span style="color:#de935f">.logo</span> { <span style="color:#b294bb">flex</span>：<span style="color:#cc6666">1</span> ; <span style="color:#b294bb">字体大小</span>：<span style="color:#cc6666">22px</span> ; }</span></span>.navと。メニュー項目は幅継承<ヘッダ>要素（100％）、それらは、画面全体に及ぶことがあります。また、.menuさらなる利点フレキシボックスのを、従ってメニュー項目のレベルは、一列に配置することができ、ALIGN-アイテムのプロパティがその垂直中央に配置されます。
あなたはまた、我々は追加した見ることができますフレックス：1; .logo CSSルール要素を。柔軟なプロパティは省略形で柔軟な成長、弾力性の収縮、および柔軟な基盤。それが表す値がある場合にのみ、フレックスグロウを他の二つの特性は、そのデフォルト値を維持しながら、。
ときフレックスは、成長特定の要素は、すべての余分なスペースフレックスコンテナを取得することを意味し、1に設定したとき。その結果、コンテナのロゴの左側、右側のメニュー項目にプッシュ。
5.折り畳まタイトル
トップのメニューバーと同じように、タイトルは固定位置を持っているにも折ら。しかし、それは取得していないのzインデックスので、ページダウンユーザーがスクロールし、残りは徐々にバナーをカバーし、それができると、値を「崩壊。」
<span style="color:#273238"><span style="color:#cccccc"><span style="color:#de935f">.banner</span> { <span style="color:#707880">/ *用于定位* / </span> <span style="color:#b294bb">宽度</span>：<span style="color:#cc6666">100％</span> ; <span style="color:#b294bb">高度</span>：<span style="color:#cc6666">300px</span> ; <span style="color:#b294bb">位置</span>：固定； <span style="color:#b294bb">顶部</span>：<span style="color:#cc6666">70px</span> ; <span style="color:#b294bb">背景</span>：<span style="color:#de935f">线性渐变</span>（45deg，＃98cbff，＃98ffcb）; <span style="color:#707880">/ *用于内容对齐* / </span> <span style="color:#b294bb">display</span>：flex; <span style="color:#b294bb">flex-direction</span>：列; <span style="color:#b294bb">证明内容</span>：空间均匀； <span style="color:#b294bb">align-items</span>：中心; }</span></span>あなたが見ることができるように、我々は再びタイトルの倍以内ALIGNコンテンツにフレキシボックスを使用します。さて、それはあなたがすることができます弾力列のレイアウトに基づいて、コンテンツの正当化とALIGN-項目財産簡単垂直および水平方向の配置要素を。
6.折りたたみタイトル
これは、折りたたまれたタイトルエフェクトの一部ではありませんが、それはまたですが.banner上記プレゼンテーションスタイルで子孫要素（タイトル、説明、およびボタン）：
<span style="color:#273238"><span style="color:#cccccc"><span style="color:#de935f">.banner-title</span> { <span style="color:#b294bb">font-size</span>：<span style="color:#cc6666">32px</span> ; <span style="color:#b294bb">底边距</span>：<span style="color:#cc6666">10px</span> ; <span style="color:#b294bb">text-align</span>：center; } <span style="color:#de935f">.banner-desc</span> { <span style="color:#b294bb">font-size</span>：<span style="color:#cc6666">22px</span> ; <span style="color:#b294bb">text-align</span>：center; } <span style="color:#de935f">.btn-signup</span> { <span style="color:#b294bb">颜色</span>：白色； <span style="color:#b294bb">背景颜色</span>：<span style="color:#cc6666">＃0056ab</span> ; <span style="color:#b294bb">边界</span>：<span style="color:#cc6666">0</span> ; <span style="color:#b294bb">填充</span>：<span style="color:#cc6666">15px </span> <span style="color:#cc6666">25px</span> ; <span style="color:#b294bb">字体大小</span>：<span style="color:#cc6666">16px</span> ; <span style="color:#b294bb">cursor</span>：指针 }</span></span>下のスクリーンショットでは、この時点でのように私たちのデモルックスを見ることができます。トップメニューのタイトルバー以来、彼らはページの最上部とコンテンツの上層部を覆うように、固定位置に折り畳まれています。次のステップでは、我々は残りのスタイルで折りたたみ可能な見出しされます。
7.スタイルの残りの部分を設定します。
あなたが折り畳まスクロールするとタイトルを作成するには、次の4つのことを行う必要があります。
- 最も重要なのは、あなたはそれが折りたたみ可能なタイトルの先頭に流れることができるように、コンテンツの残りのための背景を設定する必要があります。異なる背景がお互いをカバーする必要があり、同様の視差効果の効果があることを覚えておいてください。
- デモンストレーションでは、我々は、真っ白な背景を使用していました。あなたはいつも（そうでない場合は、タイトルが倍倍ません）効果を機能させるために、コンテンツの流れに背景を設定する必要があります。
- 2つの固定要素に対するコンテンツを配置。上部：370px; ルール下記の<header>（70ピクセル）と.banner（300ピクセルによる）の高さの合計。
- 幅に設定されている100％内容はタイトル全体を覆うように、。
- 高さも設定されている100％背景が（長いページまたはモバイルデバイスのために重要である）ページの高さ全体を覆うように、。
これは、のようなコードのルックスです：
<span style="color:#273238"><span style="color:#cccccc"><span style="color:#de935f">.article</span> { <span style="color:#b294bb">宽度</span>：<span style="color:#cc6666">100％</span>； <span style="color:#b294bb">职位</span>：相对； <span style="color:#b294bb">顶部</span>：<span style="color:#cc6666">370px</span> ; <span style="color:#b294bb">背景</span>：白色； <span style="color:#b294bb">高度</span>：<span style="color:#cc6666">100％</span> ; <span style="color:#b294bb">填充</span>：<span style="color:#cc6666">30px </span> <span style="color:#cc6666">10％</span> ; } <span style="color:#de935f">.article </span> <span style="color:#81a2be">p</span> {{ <span style="color:#b294bb">margin-bottom</span>：<span style="color:#cc6666">20px</span> ; }</span></span>新しいフロントエンドの学習qun438905713を作成するためのコード全体をチェックし、グループのほとんどは、ゼロベースの学習者である、私たちはお互いにお答えし、また学習教材の多くを準備するために、お互いを助けるには、為替のゼロベースのジュニアパートナーを歓迎しました。
そして、折りたたみヘッドを完成させます。以下は、あなたが全体のCSSを表示することができます。また、この記事のショー見ることができます折りたたみタイトルエフェクトをリアルタイムプレゼンテーションでは。
<span style="color:#273238"><span style="color:#cccccc">* { <span style="color:#b294bb">box-sizing</span>：border-box; <span style="color:#b294bb">边距</span>：<span style="color:#cc6666">0</span> ; <span style="color:#b294bb">填充</span>：<span style="color:#cc6666">0</span> ; <span style="color:#b294bb">字体家族</span>：sans-serif; <span style="color:#b294bb">颜色</span>：<span style="color:#cc6666">＃222</span> ; } <span style="color:#81a2be">a</span> { <span style="color:#b294bb">文本修饰</span>：无； } <span style="color:#81a2be">ul</span> { <span style="color:#b294bb">list-style-type</span>：none; } <span style="color:#81a2be">标头</span> { <span style="color:#b294bb">高度</span>：<span style="color:#cc6666">70像素</span> ; <span style="color:#b294bb">背景</span>：<span style="color:#cc6666">＃222</span> ; <span style="color:#b294bb">位置</span>：固定； <span style="color:#b294bb">宽度</span>：<span style="color:#cc6666">100％</span> ; <span style="color:#b294bb">z索引</span>：<span style="color:#cc6666">99</span>； } <span style="color:#81a2be">导航</span> { <span style="color:#b294bb">高度</span>：继承; } <span style="color:#de935f">.menu</span> { <span style="color:#b294bb">display</span>：flex; <span style="color:#b294bb">高度</span>：继承； <span style="color:#b294bb">align-items</span>：中心; <span style="color:#b294bb">填充</span>：<span style="color:#cc6666">0 </span> <span style="color:#cc6666">20px</span> ; } <span style="color:#de935f">.menu </span> <span style="color:#81a2be">li</span> { <span style="color:#b294bb">padding</span>：<span style="color:#cc6666">0 </span> <span style="color:#cc6666">10px</span> ; } <span style="color:#de935f">.menu </span> <span style="color:#81a2be">a</span> { <span style="color:#b294bb">颜色</span>：白色； } <span style="color:#de935f">.logo</span> { <span style="color:#b294bb">flex</span>：<span style="color:#cc6666">1</span> ; <span style="color:#b294bb">字体大小</span>：<span style="color:#cc6666">22px</span> ; } <span style="color:#de935f">.banner</span> { <span style="color:#707880">/ *用于定位* / </span> <span style="color:#b294bb">宽度</span>：<span style="color:#cc6666">100％</span> ; <span style="color:#b294bb">高度</span>：<span style="color:#cc6666">300px</span> ; <span style="color:#b294bb">位置</span>：固定； <span style="color:#b294bb">顶部</span>：<span style="color:#cc6666">70px</span> ; <span style="color:#b294bb">背景</span>：<span style="color:#de935f">线性渐变</span>（45deg，＃98cbff，＃98ffcb）; <span style="color:#707880">/ *用于内容对齐* / </span> <span style="color:#b294bb">display</span>：flex; <span style="color:#b294bb">flex-direction</span>：列; <span style="color:#b294bb">证明内容</span>：空间均匀； <span style="color:#b294bb">align-items</span>：中心; } <span style="color:#de935f">.banner-title</span> { <span style="color:#b294bb">font-size</span>：<span style="color:#cc6666">32px</span> ; <span style="color:#b294bb">底边距</span>：<span style="color:#cc6666">10px</span> ; <span style="color:#b294bb">text-align</span>：center; } <span style="color:#de935f">.banner-desc</span> { <span style="color:#b294bb">font-size</span>：<span style="color:#cc6666">22px</span> ; <span style="color:#b294bb">text-align</span>：center; } <span style="color:#de935f">.btn-signup</span> { <span style="color:#b294bb">颜色</span>：白色； <span style="color:#b294bb">背景颜色</span>：<span style="color:#cc6666">＃0056ab</span> ; <span style="color:#b294bb">边界</span>：<span style="color:#cc6666">0</span> ; <span style="color:#b294bb">填充</span>：<span style="color:#cc6666">15px </span> <span style="color:#cc6666">25px</span> ; <span style="color:#b294bb">字体大小</span>：<span style="color:#cc6666">16px</span> ; <span style="color:#b294bb">cursor</span>：指针 } <span style="color:#de935f">.article</span> { <span style="color:#b294bb">宽度</span>：<span style="color:#cc6666">100％</span>； <span style="color:#b294bb">职位</span>：相对； <span style="color:#b294bb">顶部</span>：<span style="color:#cc6666">370px</span> ; <span style="color:#b294bb">背景</span>：白色； <span style="color:#b294bb">高度</span>：<span style="color:#cc6666">100％</span> ; <span style="color:#b294bb">填充</span>：<span style="color:#cc6666">30px </span> <span style="color:#cc6666">10％</span> ; } <span style="color:#de935f">.article </span> <span style="color:#81a2be">p</span> {{ <span style="color:#b294bb">margin-bottom</span>：<span style="color:#cc6666">20px</span> ; }</span></span>結論
タイトルを折ることは、他のコンテンツは、ページの上部に表示させることができ、ユーザーフレンドリーな方法を提供します。彼らは、視差効果のように振る舞います。背景あなたは、固定された位置決め要素に対して異なる速度で異なる移動、流れの内容を確認する必要があります。
