回答編集履歴
3
質問2つ目に対する回答
answer
CHANGED
|
@@ -32,4 +32,31 @@
|
|
|
32
32
|
質問２：
|
|
33
33
|
> 普通にマウスホイールでスクロールした場合それに合わせメニューのアンダーバーの位置をスライドさせて今どこにいるかわかりやすくすること可能でしょうか？
|
|
34
34
|
|
|
35
|
+
イメージは例えば[CSSフレームワークのPushpin](http://materializecss.com/pushpin.html)のようなものと推察されます。
|
|
36
|
+
Qiitaの記事とサブタイトルを連動してるやつも同じですね。
|
|
37
|
+
現在のスクロール位置と対象の記事のトップ位置をスクロール毎のイベントで取得し、比較してた上で
|
|
38
|
+
アンダーバーを移動させることで可能となると思います。
|
|
39
|
+
|
|
35
|
-
|
|
40
|
+
```javascript
|
|
41
|
+
|
|
42
|
+
$(window).scroll(function(){ //スクロール時のイベント
|
|
43
|
+
var doc_pos = $(document).scrollTop(); //現在のスクロール位置を取得
|
|
44
|
+
var left_position = 0;
|
|
45
|
+
if(doc_pos == 0){ //0の場合はTOPとする
|
|
46
|
+
$(".global-nav--bar").css("left",left_position+"%");
|
|
47
|
+
}else{
|
|
48
|
+
for(i=1;i<5;i++){
|
|
49
|
+
c_pos = $('#content_'+i).offset().top; //各コンテンツの位置を取得
|
|
50
|
+
if(c_pos <= doc_pos){ //各コンテンツの位置を越えていたらアンダーバーを移動
|
|
51
|
+
left_position = i * 20;
|
|
52
|
+
$(".global-nav--bar").css("left",left_position+"%");
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
})
|
|
57
|
+
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
※ただし上記ソースは、グロナビメニュークリックでちょっとアンダーバーが横に動いて正位置に戻るような動作をします。
|
|
61
|
+
また「コンテンツは4つ（＋トップ）」と決め打ちなので増減した場合に対応させる必要があります。
|
|
62
|
+
その部分を含めてご自身のサイトに合うように調整してみてください。
|
2
修正
answer
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
# 注記：
|
|
2
|
-
動作検証はある程度してはいるものの、あくまでサンプルであり最適解とは限りません。
|
|
2
|
+
**動作検証はある程度してはいるものの、あくまでサンプルであり最適解とは限りません。**
|
|
3
|
-
自身の環境に導入するための参考程度にとどめておいてください。
|
|
3
|
+
**自身の環境に導入するための参考程度にとどめておいてください。**
|
|
4
|
-
**
|
|
5
4
|
|
|
5
|
+
|
|
6
6
|
質問１：
|
|
7
7
|
> 最後にマウスオーバーしたところにアンダーバーをとどめておくような設定は可能でしょうか？
|
|
8
8
|
|
1
注記
answer
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
|
+
**注記：
|
|
2
|
+
動作検証はある程度してはいるものの、あくまでサンプルであり最適解とは限りません。
|
|
3
|
+
自身の環境に導入するための参考程度にとどめておいてください。
|
|
4
|
+
**
|
|
5
|
+
|
|
1
6
|
質問１：
|
|
2
7
|
> 最後にマウスオーバーしたところにアンダーバーをとどめておくような設定は可能でしょうか？
|
|
3
8
|
|
|
4
|
-
戻ってしまうのはcssのhoverの特性だと思います。
|
|
9
|
+
hoverからoutしたときに戻ってしまうのはcssのhoverの特性だと思います。
|
|
5
10
|
hoverしたときのみに反映されるので、hoverしてない場合は初期値となります。
|
|
6
11
|
|
|
7
12
|
これを「hoverした箇所にとどめておく」はjavascriptとあわせることで可能です。
|
|
@@ -9,13 +14,13 @@
|
|
|
9
14
|
そのindexによってアンダーバーの位置を変えます。
|
|
10
15
|
|
|
11
16
|
```javascript
|
|
17
|
+
//グロナビhover時のイベントをキャッチ
|
|
12
18
|
$('.global-nav p').on({
|
|
13
19
|
'mouseenter' : function(){
|
|
14
20
|
var index = $("p").index($(this));//何番目のpタグをマウスオーバーしたか取得
|
|
15
21
|
var left_position = index * 20; //アンダーバーの位置を決定
|
|
16
|
-
|
|
17
22
|
$(".global-nav--bar").css("left",left_position+"%"); //アンダーバー移動
|
|
18
|
-
|
|
23
|
+
},
|
|
19
24
|
});
|
|
20
25
|
```
|
|
21
26
|
|