Javascript手作りフローティングメニュー_JavaScriptスキル

WBOY

リリース： 2016-05-16 16:14:30

オリジナル

1650 人が閲覧しました

一部の車輪を選択的に再発明することは、必ずしも悪いことではありません。 Aaron のブログにフローティングメニューが追加されました。非常にハイエンドなようです。この種のトリックを見るのは初めてではありませんが、自分で書いたことはありません。今日はこの機能について厳選して書いていきます。以下に、このホイールの開発プロセスを示します。これは、要件文書の分析と実装プロセスとも言えます。

デモのアドレス: http://sandbox.runjs.cn/show/to8wdmuy

ソースコードのダウンロード: https://github.com/bjtqti/floatmenu

最初のステップは、DOM ノード構造を作成することです:

コードをコピーコードは次のとおりです:

<頭>

AppCarrier
<リンク rel="スタイルシート" href="menu.css">

＆lt; h1 id = "test1"＆gt; test1＆lt;/h1＆gt;

過去は傷つくこともありますが、そこから逃げることも、そこから学ぶこともできます

過去は辛いものですが、そこから逃げることも、そこから成長することもできます

「

ルールは破られるためにある

ルールは破るべきです。

年月は肌にしわを寄せるかもしれないが、情熱を諦めると魂にしわが寄る。

& Lt; p & gt; 年月が経っても顔は老けるばかりで、情熱が心を枯れさせることはありません。

＆lt; h1 id = "test2"＆gt; test2＆lt;/h1＆gt;
＆lt; P＆gt;

毎日を最大限に生きましょう。

毎日を楽しく過ごしましょう。

予期せぬ冒険に常に備えてください。

& Lt; いつでも思いがけない冒険を始める準備ができています。

人生は失望に満ちています。物事に固執することはできません。
& Lt; & gt; 人生には満足できないことがよくありますが、過去に甘んじることなく、勇敢に前進してください。

私は自由な精神を持っています。

私の魂は自由であり、束縛されるべきではありません。

＆lt; p＆gt;心が目に見えないものを見ることがあります。＆lt;/p＆gt;
<目に見えない人は心を感じてください

単純なものは最も並外れたものでもあり、賢い人だけがそれを見ることができます。

最も平凡なことは、最も非凡なことでもあり、それを理解できるのは賢者だけです。

＆lt; h1 id = "test3"＆gt; test3＆lt;/h1＆gt;
＆lt; p＆gt; xxxxxx＆lt;/p＆gt;

how many xxxxxx

test4

how many xxxxxx

非表示

<スクリプト src="menu.js">

2 番目のステップは、CSS ファイルを準備することです:

コードをコピーします

コードは次のとおりです: ウル { リストスタイルタイプ: なし; } {

テキスト装飾: なし;

}

/*記事コンテンツエリア*/

#content {

幅:400px;

マージン: 0 自動;

フォントサイズ: 2em;

}

/*休止中のメニュー*/

.menu {

位置: 固定;

トップ:20%;

右: 0;

幅:200px;

境界線: 1 ピクセルの単色グレー;

境界線の半径: 5px;

}

.menu li {

高さ: 2em;

行の高さ: 2em;

}

.red {

色: 赤;

}

.hide {

表示: なし;

}

/*フローティングメニューを非表示にする*/

.slideIn {

変換:translate3d(202px, 0, 0);

移行期間: 0.5秒;

}

/*フローティングメニューを表示*/

.slideOut {

変換:translate3d(0, 0, 0);

移行期間: 0.5秒;

}

.static {

カラー:#007aff;

テキストの配置: 中央;

}

/*サスペンデッドボールを表示*/

.toShow {

表示: ブロック;

幅: 4.8em;

高さ: 2em;

行の高さ: 2em;

境界半径: .5em;

枠線:1px ソリッドグレー;

変換:translate3d(-5em, 0, 0);

移行期間: 1 秒;

}

3 番目のステップは、js コードの記述を開始することです:

コードをコピー

コードは次のとおりです:

(関数(ドキュメント){

//各章のリンク場所を収集

var pos = [],

// メニューのアイテムを収集

リンク = doc.getElementsByTagName('a'),

//章のタイトルを収集します

title = doc.getElementsByTagName('h1'),

//一時停止メニュー

menu = doc.getElementById('menubar'),

// 現在の選択内容

currentItem=null;

//赤のスタイルを追加

var addClass = 関数 (要素){

currentItem && currentItem.removeAttribute('class');

element.setAttribute('class','red');

currentItem = 要素;

}、

// ウェブページがハイロールされます: 

getScrollTop = function (){

return Math.ceil(document.body.scrollTop) 1;

}、

//スクロール位置を計算

StartScroll = function (){

varscrollTop = getScrollTop(),

len = タイトル.length,

i = 0;

//第1条

If(scrollTop>=0 &&scrollTop
addClass(links[0]);

return;

}

// 最後の 
If(scrollTop>=pos[len-1]){

addClass(links[len-1]);

return;

}

// 真ん中
for(;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(ターゲット);

return;

}

If(target.nodeName.toLowerCase() === 'p'){

If(target.className == 'static'){

//メニューを非表示
This.className = 'メニュー スライドイン';

setTimeout(function(){

target.className = 'static toShow';

Target.innerHTML = '表示';

},1000);

}else{

//メニューを表示

target.className = 'static';

target.innerHTML = '非表示';

This.className = 'メニュー スライドアウト';

}

}

}

//各章の初期位置を計算

var ln = title.length;

; while(--ln>-1){

//titles[len].offsetParent.offsetTop = 0;

pos.unshift(titles[ln].offsetTop);

}

StartScroll();

//スクロールを聞く

window.onscroll = function(){

StartScroll()

}

})(ドキュメント);

分析:

1. 指定したセクションに自動的にジャンプします

このステップは、タグのアンカー機能を使用して実行できます。HTML5 では将来的に name 属性がサポートされないため、アンカーの名前を指定します。 IDを使ってジャンプします。

2. フローティングメニューの項目が左側のコンテンツのどの章に属しているかを特定します。

このステップは難しいので、最初に簡単に分析してみましょう:

2.1 最初の状況は、メニュー項目を手動でクリックすることです。これは簡単で、クリックされた要素を特定するだけです。

2.2 2 番目のケースでは、マウスの中ボタンを使用してスクロールするか、スクロールバーをドラッグします。このとき、左側のコンテンツと右側のメニュー項目を関連付ける必要があります。簡単なものから始めて、次に難しいものを段階的に実行し、1 つずつ克服する戦略を検討してください。

2.2.1 まずタイトル要素の座標の高さを収集します。これは、すべての h1 タグの垂直方向の高さです。配列 1 に格納します。

2.2.2 メニュー項目の a 要素を収集し、配列 2 に格納します。

2.2.3 スクロールイベントをリッスンし、現在のコンテンツがどのメニュー項目に属しているかを判断します。

ステップを実行するときは、原稿用紙に絵を描くことをお勧めします:

******************
                                                                                                    *
                                                                                                                                                                                                                                                   *
                                                                                                                                           *
                                                                                                 *

スクロールするたびに、現在のスクロール距離がどの間隔であるかを決定します。0 から A1 までであれば第 1 章、A1 から A2 までであれば第 2 章などとなります。

要素の位置と高さについては、単純に element.offsetTop を使用して取得します。jquery を使用して取得する場合は、$('element').offset() にする必要があります。トップ、

同様に、ローリングバーの高さも、単純に document.body.scrolltop を使用して取得します。これを jquery に置き換えると、$ (window)

になります。

絵を描くことの機能は、抽象的な問題を具体化し、考えたりルールを見つけたりするのに役立ちます。おそらくそれを「モデリング」と呼んだほうがもう少し崇高かもしれません。

配列 1 と配列 2 の関係は 1 対 1 対応である必要があることを強調しておく必要があります。たとえば、は