いくつかのホイールを選択的に繰り返すことは悪いことではないかもしれません。アーロンのブログは、非常に背が高いと思われる中断されたメニューを追加しました。この種のトリックは、私がそれを見たのは初めてではありませんが、自分で書いたことはありません。今日は、この機能について選択的に書きます。以下は、このホイールの開発プロセスであり、要件ドキュメントの分析と実装プロセスと見なすこともできます。
デモアドレス：http：//sandbox.runjs.cn/show/to8wdmuy
ソースコードのダウンロード：https：//github.com/bjtqti/floatmenu
最初のステップは、DOMセクション構造を作成することです。
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<title> appcarrier </title>
<link rel = "styleSheet" href = "menu.css">
</head>
<body>
<div id = "content">
<h1 id = "test1"> test1 </h1>
<p>過去は痛いです。しかし、あなたはそれから走るか、それから学ぶことができます</p>
<p>過去は苦痛でしたが、あなたはそれから逃げるか成長します</p>
<p>彼がそれを避けるために取る道で彼の運命に出会う</p>
<p>運命から逃れるための途中ですが、予期せずに遭遇します</p>
<p>ルールは壊れることを意図しています</p>
<p>ルールを破る必要があります。 </p>
<p>年は肌をしわになるかもしれませんが、熱意をあきらめるために魂をしわになります。</p>
<p>時間の経過は顔を古くするだけですが、情熱はもはや心を萎縮させません。 </p>
<h1 id = "test2"> test2 </h1>
<p>あなたが学んだ知識を絶えず練習することによってのみ、あなたはそれを本当に習得することができます。 </p>
<p>毎日最大限に生きています。</p>
<p>毎日お楽しみください。 </p>
<p>星に目を向け、足を地面に置いてください。</p>
<p>高尚な野心を持ち、足を地面に保ちます。 </p>
<p>常に予期せぬ冒険に立ち向かいます。</p>
<p>いつでも予想外の冒険を始める準備をしてください。 </p>
<p>人生は失望に満ちています。あなたは物事にこだわることはできません。先に進まなければなりません。</p>
<p>人生はしばしば不幸であり、過去にふけることはなく、勇敢に前進します。 </p>
<p>私は自由な精神です。ケージはできません。</p>
<p>私の魂は自由であり、縛られるべきではありません。 </p>
<p>時々、心が目に見えないものを見る。</p>
<p>見えない人はそれを感じることができます</p>
<p>単純なものも最も並外れたものであり、賢者だけがそれらを見ることができます。</p>
<p>最も普通のことも最も並外れたものであり、賢者だけがそれを理解しています。 </p>
<h1 id = "test3"> test3 </h1>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<h1 id = "test4"> test4 </h1>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
<p> xxxxxx </p>
</div>
<div id = "menubar">
<p>非表示</p>
<ul>
<li> <a href = "＃test1"> test1 </a> </li>
<li> <a href = "＃test2"> test2 </a> </li>
<li> <a href = "＃test3"> test3 </a> </li>
<li> <a href = "＃test4"> test4 </a> </li>
</ul>
</div>
</body>
<スクリプトsrc = "menu.js"> </script>
</html>
2番目のステップは、CSSファイルを準備することです。
コードコピーは次のとおりです。
ul {
リストスタイルタイプ：なし;
}
{
テキスト装置：なし;
}
/*記事コンテンツエリア*/
＃コンテンツ {
幅：400px;
マージン：0 Auto;
font-size：2em;
}
/*フローティングメニュー*/
.menu {
位置：修正;
トップ：20％;
右：0;
幅：200px;
ボーダー：1pxソリッドグレー;
ボーダーラジウス：5px;
}
.menu li {
高さ：2em;
Line-Height：2em;
}
。赤 {
色：赤;
}
。隠れる {
表示：なし;
}
/*フローティングメニューを非表示*/
.slidein {
変換：translate3d（202px、0、0）;
遷移期間：.5秒;
}
/*フローティングメニューを表示*/
.slideout {
変換：translate3d（0、0、0）;
遷移期間：.5秒;
}
.Static {
色：＃007AFF;
テキストアライグ：センター;
}
/*フローティングボールを表示*/
.toshow {
表示：ブロック;
幅：4.8em;
高さ：2em;
Line-Height：2em;
Border-Radius：.5em;
ボーダー：1pxソリッドグレー;
変換：translate3d（-5em、0、0）;
遷移期間：1秒;
}
3番目のステップはJSコードの書き込みを開始します：
コードコピーは次のとおりです。
（function（doc）{
//各章のリンクの場所を収集します
var pos = []、
//メニュー上のアイテムのコレクション
links = doc.getelementsbytagname（ 'a'）、
//章のタイトルを収集します
タイトル= doc.getElementsByTagname（ 'H1'）、
//ハンギングメニュー
メニュー= doc.getElementbyid（ 'menubar'）、
//現在の選択
currentItem = null;
//赤いスタイルを追加します
var addclass = function（element）{
currentItem && currentItem.removeattribute（ 'class'）;
element.setattribute（ 'class'、 'red'）;
currentItem = element;
}、
// Webページは高く展開されています：
getscrolltop = function（）{
return math.ceil（document.body.scrolltop）+1;
}、
//スクロール位置を計算します
startscroll = function（）{
var scrolltop = getscrolltop（）、
len = titles.length、
i = 0;
//第1条
if（scrolltop> = 0 && scrolltop <pos [0]）{
addclass（links [0]）;
戻る;
}
//最後のもの
if（scrolltop> = pos [len-1]）{
addclass（links [len-1]）;
戻る;
}
//真ん中
for（; i <len; i ++）{
if（scrolltop> pos [i] && scrolltop <pos [i+1]）{
addclass（links [i]）;
壊す;
}
}
};
//リストのリンクをクリックして色を変更します
menu.onclick = function（e）{
var Target = E.Target || E.SRCELEMENT;
if（target.nodename.tolowercase（）=== 'a'）{
//アイテムのステータス表示をリストします
addclass（ターゲット）;
戻る;
}
if（target.nodename.tolowercase（）=== 'p'）{
if（target.classname == 'static'）{
//メニューを非表示にします
this.classname = 'メニューSlidein';
setimeout（function（）{
Target.ClassName = 'Static Toshow';
ターゲット.innerhtml = 'show';
}、1000）;
}それ以外{
//メニューを表示します
Target.className = 'static';
ターゲット.innerhtml = 'hide';
this.className = 'メニュースライドアウト';
}
}
}
//各章の初期位置を計算します
var ln = titles.length;
while（-ln> -1）{
//titles [len] .offsetparent.offsettop = 0;
pos.unshift（タイトル[ln] .offsettop）;
}
startscroll（）;
//スクロール
window.onscroll = function（）{
startscroll（）
}
}）（書類）;
分析：
1.指定されたセクションに自動ジャンプを実装します
この手順は、<a>タグのアンカー関数を使用して実行できます。 HTML5は将来の名前属性をサポートしていないため（HTML5はそれをサポートしていません。アンカーの名前を指定します。）、IDを使用してジャンプすることを検討してください。
2。左側のコンテンツのどの章がフローティングメニューのアイテムに属しているかを特定します。
このステップは難しいポイントです。簡単に分析しましょう。
2.1最初のケースは、メニュー項目を手動でクリックすることです。これは簡単です。クリックされた要素を識別するだけです。
2.2 2番目のケースでは、中央のマウスボタンを介してスクロールバーをスクロールまたはドラッグします。この時点では、左側のコンテンツと右側のメニュー項目を関連付ける必要があります。これは最も難しい部分です。簡単で難しいことから始めて、段階的に実装する戦略を考慮し、それぞれが突破します。
2.2.1最初にタイトル要素の座標高さを収集します。それは、すべてのH1タグの垂直高さです。配列1を保存します。
2.2.2メニュー項目で要素Aを収集し、配列2に保存します。
2.2.3スクロールイベントを聞いて、現在のコンテンツが属するメニュー項目を決定します。
一歩を踏み出すときは、原稿用紙に絵を描くことをお勧めします。
A1
****************
* A2
*
****************
* A3
*
****************
*
* A4
*
スクロールするたびに、現在のスクロール距離がどの範囲であるかを決定します。 0からA1の場合、第1章、A1からA2、第2章などです。
要素の位置の高さに関しては、element.offsettopを使用してここで取得します。互換性の問題がある場合があります。 jqueryを使用する場合、$（ 'element'）。offset（）。top、
同様に、document.body.scrolltopを使用して、スクロールバーの高さを取得しました。 jqueryに置き換えられた場合、$（window）.scrolltop（）である必要があります。
描画の目的は、抽象的な問題を具体化し、ルールを考えて見つけるのを助けることです。 「モデリング」と呼ぶことで背が高く見えるかもしれません。
配列1と配列2の関係は1つずつ対応する必要があることを強調する必要があります。たとえば、対応する<a href = "＃h1"> is <h1 id = "h1">。
2.3 3番目のケースでは、メニューステータスインジケーターページを直接入力するとき。たとえば、index.html＃h3のようなアドレスを介して入力する場合、メニューのH3を強調表示する必要があります。
3.表示メニューの表示を実装し、アニメーションを非表示にします。
3.1このステップは比較的単純でなければなりません。最初に行うことを検討できます。 CSS3のTramSformプロパティを使用するだけです。シンプルで効率的です。クロスブラウザーの場合は、互換性があります。
変換：translate3d（x軸、y軸、z軸）; 3Dを使用すると、ハードウェアアクセラレーションを使用してアニメーション効果が向上しますが、消費電力は増加するため、それをうまく利用できます！最初のパラメーターは、左方向と右方向を制御することです。それが正である場合、それは右に移動することを意味し、それが負である場合、それは左に移動することを意味します。これは実際には厳密ではありません。実際、基準点に基づいて決定する必要があります。たとえば、要素のx座標が0の場合、xの値が右に増加し、左に縮小され、0がリセットされます。
分析後、コードが記述されます。これについて何も言うことはありません。キーボードを入力することで生成された音楽的な感覚をお楽しみください。
書き込み後、プレビューし、メニューをクリックし、指定された章にジャンプし、アイテムをクリックして赤くなり、現在のページを更新すると、依存関係の表示が正しいです。スクロールホイールをスライドすると、メニュー項目はコンテンツの変更に応じて変更されます。スクロールバーをドラッグします。同じことが当てはまります。最後に、クリックして非表示、メニューを撤回し、クリックして表示すると、メニューがスライドします。これにより、サスペンション機能が完了します。
上記はこの記事のすべてです。あなたがそれを気に入ってくれることを願っています。