質問編集履歴
3
内容修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -13,13 +13,44 @@
|
|
|
13
13
|
③①のボタンをクリックすると、イベントが発火し、検索フォームが表示される（jquery）
|
|
14
14
|
④検索フォームがフォーカスされる（アクティブになる）と画面上まで強制スクロールされる
|
|
15
15
|
|
|
16
|
-
###
|
|
16
|
+
###実装しているコード
|
|
17
17
|
|
|
18
|
+
wordpressで構築しているサイトで、下記のようなコードを実装しています。（最低限のコードだけ記載しています）
|
|
19
|
+
|
|
20
|
+
####HTML
|
|
21
|
+
|
|
22
|
+
```php
|
|
23
|
+
<div id="search">
|
|
24
|
+
<form role="search" method="get" id="searchform" action="<?php echo home_url(); ?>/search">
|
|
25
|
+
<label class="hidden" for="q">
|
|
26
|
+
<?php _e('', 'kubrick'); ?>
|
|
27
|
+
</label>
|
|
28
|
+
<input type="search" value="<?php the_search_query(); ?>" name="q" id="q" placeholder="検索ワードを入力" />
|
|
29
|
+
<button type="submit" id="searchsubmit" alt="検索" value="<?php _e('Search', 'kubrick'); ?>">
|
|
30
|
+
<i class="fa fa-search" aria-hidden="true"></i>
|
|
31
|
+
</button>
|
|
32
|
+
</form>
|
|
33
|
+
</div>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
####CSS
|
|
37
|
+
```css
|
|
38
|
+
#search {
|
|
39
|
+
position: fixed;
|
|
40
|
+
left: 0;
|
|
41
|
+
right: 0;
|
|
42
|
+
top: 60px;
|
|
43
|
+
z-index: 999;
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
####本番サイトで実装しているコードと具体的なカスタマイズ内容
|
|
48
|
+
|
|
18
49
|
参考:[https://moriawase.net/fixed-header-slide-menu](https://moriawase.net/fixed-header-slide-menu)
|
|
19
50
|
|
|
20
|
-
###
|
|
51
|
+
###理想のサイト
|
|
21
52
|
|
|
22
|
-
下記のサイトの挙動
|
|
53
|
+
下記のサイトのような挙動にできればと思っております。
|
|
23
54
|
|
|
24
55
|
[ノマド的節約術](https://nomad-saving.com)
|
|
25
56
|
|
|
@@ -30,6 +61,12 @@
|
|
|
30
61
|
しかし、コードを分析しても、特にそれらしいコードを見つけることができませんでした。
|
|
31
62
|
おそらく、jqueryで制御しているのだと思いますが。。
|
|
32
63
|
|
|
33
|
-
|
|
64
|
+
###お知恵を拝借したいこと
|
|
34
65
|
|
|
66
|
+
今回お知恵を拝借したいことは、**画面上部にfixedされたinput要素（もしくは、fixedされた要素内のinput要素）がfocusされた時の強制スクロールを止める方法**です。
|
|
67
|
+
|
|
68
|
+
冒頭に記載した参考サイトを見ても解決しないため、HTML,CSSで制御するのは難しいのではないかなと思っています。
|
|
69
|
+
|
|
70
|
+
HTML,CSS,jqueryをいじって解決できるのであれば、それが1番ですが、JSライブラリや、何かヒントになるページをご紹介いただければと思っております。
|
|
71
|
+
|
|
35
72
|
何卒よろしくお願い申し上げます。
|
2
リンク修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
類似の質問に対しての回答を参考にしても解決できなかったため質問させていただきます。
|
|
4
4
|
|
|
5
|
-
参考:[
|
|
5
|
+
参考:[position:fixedしている要素内のinputにフォーカスが入ると、ページトップへスクロールしてしまう](https://teratail.com/questions/22695)
|
|
6
6
|
|
|
7
|
-
参考:[
|
|
7
|
+
参考:[ios8でpositionfixedなheaderに付けたinputにフォーカスを当てると一番上までスクロールしてしまう](http://ja.stackoverflow.com/questions/2979/ios8でpositionfixedなheaderに付けたinputにフォーカスを当てると一番上までスクロールしてしまう)
|
|
8
8
|
|
|
9
9
|
###問題
|
|
10
10
|
|
|
@@ -15,15 +15,15 @@
|
|
|
15
15
|
|
|
16
16
|
###問題のサイトと実装しているコード
|
|
17
17
|
|
|
18
|
-
参考:[
|
|
18
|
+
参考:[https://moriawase.net/fixed-header-slide-menu](https://moriawase.net/fixed-header-slide-menu)
|
|
19
19
|
|
|
20
20
|
###お知恵を拝借したいこと
|
|
21
21
|
|
|
22
22
|
下記のサイトの挙動が、私の理想としているところです。
|
|
23
23
|
|
|
24
|
-
ノマド的節約術
|
|
24
|
+
[ノマド的節約術](https://nomad-saving.com)
|
|
25
25
|
|
|
26
|
-
朝日新聞デジタル
|
|
26
|
+
[朝日新聞デジタル](http://www.asahi.com/sp/)
|
|
27
27
|
|
|
28
28
|
特に、ノマド的節約術さんの挙動が素晴らしく、ぜひ参考にしたいと考えております。
|
|
29
29
|
|
1
リンク追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
類似の質問に対しての回答を参考にしても解決できなかったため質問させていただきます。
|
|
4
4
|
|
|
5
|
-
参考:https://teratail.com/questions/22695
|
|
5
|
+
参考:[リンク内容](https://teratail.com/questions/22695)
|
|
6
6
|
|
|
7
|
-
参考:http://ja.stackoverflow.com/questions/2979/ios8でpositionfixedなheaderに付けたinputにフォーカスを当てると一番上までスクロールしてしまう
|
|
7
|
+
参考:[リンク内容](http://ja.stackoverflow.com/questions/2979/ios8でpositionfixedなheaderに付けたinputにフォーカスを当てると一番上までスクロールしてしまう)
|
|
8
8
|
|
|
9
9
|
###問題
|
|
10
10
|
|
|
@@ -15,15 +15,15 @@
|
|
|
15
15
|
|
|
16
16
|
###問題のサイトと実装しているコード
|
|
17
17
|
|
|
18
|
-
参考:https://moriawase.net/fixed-header-slide-menu
|
|
18
|
+
参考:[リンク内容](https://moriawase.net/fixed-header-slide-menu)
|
|
19
19
|
|
|
20
20
|
###お知恵を拝借したいこと
|
|
21
21
|
|
|
22
22
|
下記のサイトの挙動が、私の理想としているところです。
|
|
23
23
|
|
|
24
|
-
ノマド的節約術:https://nomad-saving.com
|
|
24
|
+
ノマド的節約術:[リンク内容](https://nomad-saving.com)
|
|
25
25
|
|
|
26
|
-
朝日新聞デジタル:http://www.asahi.com/sp/
|
|
26
|
+
朝日新聞デジタル:[リンク内容](http://www.asahi.com/sp/)
|
|
27
27
|
|
|
28
28
|
特に、ノマド的節約術さんの挙動が素晴らしく、ぜひ参考にしたいと考えております。
|
|
29
29
|
|