Html5ナビゲーションバー天井画の原理と対照的な実装

I. 天井とは何ですか？

トップサックエフェクトは、ナビゲーションや検索ボックスなど、Web開発において一般的な適用シーンがあるインタラクションです。トラフィックの水平分布、天井効果への注意と水平スライドカットタブのジェスチャーを行う機能は、ユーザーが迅速に多くの製品を発見することができます。

H5ナビゲーションバーの上面吸着効果表示を楽しむ市場

1. タオバオジュビリー天井デモ。

2. タオバオ100億円補助金上限デモ。

II. 一般的なタブバー天井の解決策

• 位置の粘着性を利用した天井ソリューション
• スクロールイベントをリッスンするJSベースの天井ソリューション

III. スキームの合理性と比較

1. 位置の粘着スキームの実装と詳細

1.1.詳細な知識

位置は、私たちはしばしばレイアウトに良い解決策をもたらすことができ、いくつかの特定の問題、例えば、カードの様々なアイコンやラベルを解決するCSSプロパティを使用しています。位置スティッキー位置はまた、天井の上部を達成するためのソリューションの一つであり、最初に位置が持っているプロパティ値と関連する意味を見てみましょう。

MDNポータル

stickyプロパティについてですが、中国語のstickyはその名の通り「粘着性がある」という意味で、その効果はposition:relativeとposition:fixedを組み合わせたようなものとなっています。このプロパティは、かつてChromeで廃止されましたが、その後、再びサポートされています

画像

<! --example usage-->
nav{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

1.2 互換性

上に示したように、positionの付箋はすでにあらゆる種類のブラウザでサポートされており、-webkit-prefixのサポートがまだ必要なsafariを除いては、比較的よくサポートされていると言えます。

デモの実装です。

  *{
        padding:0;
        margin:0;
    }
    .container{
        width:100%;
        background:rgba(0,0,0,.5);
    }
    .nav{
        width:100%;
        height:50px;
        text-align: center;
        line-height: 50px;
        background: black;
        color:white;
        position: sticky;
        top:0;
    }
    .body{
        width:100%;
        height:10000px;
    }

<div class="container">
    <div style="width:100%;height:100px;"></div>
    <div class="nav">position sticky Positioning</div>
    <div class="body"></div>
</div>

画像

1.3. 考えられる落とし穴

•  position:stickyを使用する場合、（top, left, right, bottom）のいずれかを同時に使用しなければならず、そうでない場合は無効となります。
• 親要素に overflow:hidden 属性や overflow:auto 属性がない場合は、無効となります。
{を使用します。 親要素の高さが付箋の高さより小さくてはいけません。 {を使用します。 付箋要素は親要素の中でしか機能しない

2. スクロールイベントをリッスンするためのJSシーリングスキーム

全体としては、JSを通じてスクロールイベントをリスニングし、最上部に到達したとき（最上部からの距離が0のとき）、動的に要素のpositionプロパティを固定に変更して、上部吸収の効果を得るというものです。より一般的な方法として、offsetTopを使用してトップからの距離を決定することができますが、offsetTopは位置決め親からの相対的なオフセットであるため、トップを吸収するためにスクロールする必要がある要素が親要素を位置づけているように見える場合、offsetTopはページのトップからの距離ではありません。ここでは、以下を使用することを検討します。 getBoundingClientRect() を使用して、ブラウザウィンドウの上下左右に対するページ上の要素の距離を取得します。 MDNポータル

{{コード

画像

Html5ナビゲーションバー天井方式の原理と実装の比較について、この記事を紹介し、より関連するHtml5ナビゲーションバー天井の内容は、スクリプトハウス過去の記事を検索するか、次の関連記事を閲覧を続けてください、私はあなたが将来的にもっとスクリプトハウスをサポートして願っています！。