質問編集履歴
2
サーバー変更に伴いサイトのURLを変更しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
しかし、スクロールしただけでは色が変わらず、メニューのLinksをクリックして飛んだ際にだけ色が変わる(もしくはそれでも変わらない)という現象が一部の環境で起きています。
|
|
9
9
|
|
|
10
10
|
【実際のサイト】
|
|
11
|
-
[こちら](http://nfre.
|
|
11
|
+
[こちら](https://nfre.teen.jp/NefriePortfolio.html) になります。
|
|
12
12
|
|
|
13
13
|
【コード】
|
|
14
14
|
```JS
|
1
不要な部分の削除、不足している説明や新たにわかった情報などを追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -3,8 +3,14 @@
|
|
|
3
3
|
ページ内「Links」の項目を表示しているとき、もしくはページ最下部までスクロールしたとき、メニューのLinksのブロックのみ色が変わる
|
|
4
4
|
というコードを書いたのですが、一部の環境でしか動作しませんでした。
|
|
5
5
|
|
|
6
|
+
【現象の詳細】
|
|
6
|
-
|
|
7
|
+
想定では、最下部までスクロールすると、メニュー内のLinksのブロックの色が濃いビビッドピンクになるはずでした。
|
|
8
|
+
しかし、スクロールしただけでは色が変わらず、メニューのLinksをクリックして飛んだ際にだけ色が変わる(もしくはそれでも変わらない)という現象が一部の環境で起きています。
|
|
7
9
|
|
|
10
|
+
【実際のサイト】
|
|
11
|
+
[こちら](http://nfre.moo.jp/test2/NefriePortfolio.html) になります。
|
|
12
|
+
|
|
13
|
+
【コード】
|
|
8
14
|
```JS
|
|
9
15
|
$(document).ready(function(){
|
|
10
16
|
|
|
@@ -45,6 +51,7 @@
|
|
|
45
51
|
Firefox (Windows PCでの通常の閲覧)
|
|
46
52
|
Pixel3a Chrome
|
|
47
53
|
dtab d-41a Chrome
|
|
54
|
+
iPhone SE 第2世代 Chrome
|
|
48
55
|
(Pixel5)
|
|
49
56
|
(Galaxy S8+)
|
|
50
57
|
(Galaxy S20 Ultra)
|
|
@@ -52,6 +59,8 @@
|
|
|
52
59
|
【試したこと】
|
|
53
60
|
スクロール量の取得方法をdocument.body.scrollTopとdocument.documentElement.scrollTopに変える
|
|
54
61
|
→Edge、Chromeでも動作しなくなる
|
|
62
|
+
スクロール量の取得方法を$(window).scrollTop()とdocument.body.scrollTopとdocument.documentElement.scrollTopの併用にする
|
|
63
|
+
→変化なし
|
|
55
64
|
|
|
56
65
|
狙い通りに色が変わるようなプログラムは作れるものなのでしょうか？
|
|
57
66
|
また、可能な場合はどのような方法で行えば良いのでしょう？
|