Fixed よりも良いですが、スクロールに反応して消え、目に見えるヘッダーコード

単に position: fixed 式サイトヘッダーやナビゲーションを固定させることよりも、スクロールに対応しているスクリーンを下げ、上げると、表示されるヘッダーは、はるかに優れた方法である。スクロールに対応するヘッダーとは、これをより効率的かつ快適なユーザーエクスペリエンスを提供するサイトのロゴやメニュー、ナビゲーションバーなどを言う。

スクロールに対応するヘッダーを書き込む必要がある理由

ユーザーにヘッダーやナビゲーションバーを常に示したいと貪欲に、画面の上部に100px 未満程度のスペースを、継続的に自分のサイトやブログのロゴやメニューなどの周りに、移動トラックが多い。、デスクトップ画面では、主として関係がない場合もある。が平均的にサイズ600px このまましないモバイルユーザーに最低限の画面の1/6 を常に選別し (独自のブラウザーのナビゲーションも考慮すると、3分の 1 ~ 4 分の1程度を強調する)、ユーザーが非表示にするか、またはコントロールすることもあり非常に暴力的な (?)の不快感を안겨준다。

彼のために (主観的な考えで) ユーザーの利便性やナビゲーションのための答えは、画面の上部に常にヘッダーを固定して置くべきではない。常に実装されているヘッダーを取得したい場合は、ユーザーがコンテンツを読み取ろうとしてスクロールまたはタッチするときには、ヘッダー、コンテンツ、文章を読み、メニューを見て、またはナビゲーション機能を使用したい画面をスクロールするか、タッチをすると、再表示されるヘッダーを実装する必要があります (もちろん、この方法を簡単に上記の内容を再表示するユーザーにとっては不便な場合もある)。個人的にこれを実装しない場合は、position: fixed の機能自体を使用しないことを推奨する。

スクロールに対応するヘッダーを作成する方法3の手順

スクロールに対応するヘッダーを作成するにはさまざまな方法を使用できる。がどのような環境で表現するにはウェブ標準を考慮し、CSS などの方法を使用するよりも、jQuery を使用する方法を推薦する。つ蜂蜜運転 (GKKmon) は、あなただけのことはジャワスクリプト jQuery を使用しないようにしてください (基本的な機能を使用するよりも速度やリソースが大幅に遅れる可能性が高いため)、スクロールに対応するヘッダーはあれこれ書かれている結果、jQuery がパフォーマンスを大きく損なうことなく、偉大なウェブの標準的な性を示したのである。

JQuery を使用する場
合は1。JQuery プラグインを実行。
2。読み込み jQuery のプラグインで使用するスクリプトを宣言する。
3。彼に合わせて HTML や PHP、CSS を手を見なければならない。

JQuery プラグインのロード

スクロールに対応するヘッダーを作成するためのプラグインは、jQuery-2.2.2 版である。このプラグインは

<script src="https://code.jquery.com/jquery-2.2.2.js"></script>

を宣言するとされる。

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>

を使用すると、バージョンの後ろに min が自分自身を、のようなコードですが、スペースなどを削除して高速にロードすることがあるのでこの方法を使用できます。

読み込み jQuery のプラグインでは、スクリプトで宣言

プラグインを呼び出すことを願っていくつかのスクリプトを使用するか宣言しなければならない。

<script></script>
$(function () {
    var lastScrollTop = 0,
        delta = 15;
    $(window).scroll(function (event) {
        var st = $(this).scrollTop();
        if (Math.abs(lastScrollTop - st)<= delta) return; delta)=""></= delta) return;>
        if ((st > lastScrollTop) && (lastScrollTop > 0)) {
            $ (要素名) .css (top」、「-非表示の高さ);
        } else {
            $ (要素名) .css (top」、「0px);
        }
        lastScrollTop = st;
    });
});  

要素名を制御する要素の class や id を入れる。通常 .header が化けたりとされる。非表示にする高さには非表示にするときに px などの画面上に吹き飛ばすので、これらの要素と同じ高さまたはより大きい高さを設定する必要があります。Height: 50px のクラス名前 .header をコントロールしたい場合は

<script></script>
$(function () {
    var lastScrollTop = 0,
        delta = 15;
    $(window).scroll(function (event) {
        var st = $(this).scrollTop();
        if (Math.abs(lastScrollTop - st)<= delta) return; delta)=""></= delta) return;>
        if ((st > lastScrollTop) && (lastScrollTop > 0)) {
            $(".header").css("top", "-50px);
        } else {
            $(".header").css("top", "0px");
        }
        lastScrollTop = st;
    });
});  

と宣言される。このスクリプトの詳細については、タッチまたはマウスのスクロールで画面がダウン状態になることを検出すると、.header の CSS top-50px に変更し、スクロールが上に上がる .header の CSS top を0px に変えるという意味である。

CSS 要素のスタイルを指定すると、top は、position プロパティで指定された要素の画面上からの位置を指定する。つまり画面最上段 0px-50px を上下にすることである。

JQuery のスクリプトに合わせて CSS を変更する

最終的に jQuery の設定に合わせて CSS を変更するとされる。

<style></style>
.header{
position:fixed;
・ * Position: fixed を使用して固定する * と
z-index:20;
・ * その他の要素に選別することができ、適切な z-index を設定する * と
width:100%;
・ * 画面の 100% の水平方向のサイズと、
height:50px;
・ * 縦50px のヘッダーを作成する * と
box-sizing:border-box;
transition: All 0.2s ease; 
・ * 消え、が表示されるときに、静かに目に見える効果を与えるが、必ずしも必要がないされている * と
-webkit-transition: All 0.2s ease;
-moz-transition: All 0.2s ease;
-o-transition: All 0.2s ease;
}

この3つをすべて完全にスクロールに反応して消えるようである偉大なヘッダーを作ることができる。

完成したコード

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>

<script></script>
$(function () {
    var lastScrollTop = 0,
        delta = 15;
    $(window).scroll(function (event) {
        var st = $(this).scrollTop();
        if (Math.abs(lastScrollTop - st)<= delta) return; delta)=""></= delta) return;>
        if ((st > lastScrollTop) && (lastScrollTop > 0)) {
            $(".header").css("top", "-50px);
        } else {
            $(".header").css("top", "0px");
        }
        lastScrollTop = st;
    });
});  


<style></style>
.header{
position:fixed;
z-index:20;
width:100%;
height:50px;
box-sizing:border-box;
transition: All 0.2s ease; 
-webkit-transition: All 0.2s ease;
-moz-transition: All 0.2s ease;
-o-transition: All 0.2s ease;
}

説明どおりに設定すれば、簡単に優れたユーザーエクスペリエンスを提供する、クオリティのヘッダーを持つことができる。分離ではないか、かかりそうですが、あなたのサイトやブログに24時間365日常に浮動小数点のヘッダーのためのものなので、必ず修正するようにしましょう。本人は慣れていて、自分のサイトだか知らなくても、常に固定され、画面を覆う ' ツールバー ' のようなヘッダーは、ユーザーに最悪ユーザー経験を提供するためである。