質問編集履歴
3
内容修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -28,7 +28,69 @@
|
|
|
28
28
|
|
|
29
29
|
|
|
30
30
|
|
|
31
|
-
###
|
|
31
|
+
###実装しているコード
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
wordpressで構築しているサイトで、下記のようなコードを実装しています。（最低限のコードだけ記載しています）
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
####HTML
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
```php
|
|
44
|
+
|
|
45
|
+
<div id="search">
|
|
46
|
+
|
|
47
|
+
<form role="search" method="get" id="searchform" action="<?php echo home_url(); ?>/search">
|
|
48
|
+
|
|
49
|
+
<label class="hidden" for="q">
|
|
50
|
+
|
|
51
|
+
<?php _e('', 'kubrick'); ?>
|
|
52
|
+
|
|
53
|
+
</label>
|
|
54
|
+
|
|
55
|
+
<input type="search" value="<?php the_search_query(); ?>" name="q" id="q" placeholder="検索ワードを入力" />
|
|
56
|
+
|
|
57
|
+
<button type="submit" id="searchsubmit" alt="検索" value="<?php _e('Search', 'kubrick'); ?>">
|
|
58
|
+
|
|
59
|
+
<i class="fa fa-search" aria-hidden="true"></i>
|
|
60
|
+
|
|
61
|
+
</button>
|
|
62
|
+
|
|
63
|
+
</form>
|
|
64
|
+
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
####CSS
|
|
72
|
+
|
|
73
|
+
```css
|
|
74
|
+
|
|
75
|
+
#search {
|
|
76
|
+
|
|
77
|
+
position: fixed;
|
|
78
|
+
|
|
79
|
+
left: 0;
|
|
80
|
+
|
|
81
|
+
right: 0;
|
|
82
|
+
|
|
83
|
+
top: 60px;
|
|
84
|
+
|
|
85
|
+
z-index: 999;
|
|
86
|
+
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
####本番サイトで実装しているコードと具体的なカスタマイズ内容
|
|
32
94
|
|
|
33
95
|
|
|
34
96
|
|
|
@@ -36,11 +98,11 @@
|
|
|
36
98
|
|
|
37
99
|
|
|
38
100
|
|
|
39
|
-
###
|
|
101
|
+
###理想のサイト
|
|
40
102
|
|
|
41
103
|
|
|
42
104
|
|
|
43
|
-
下記のサイトの挙動
|
|
105
|
+
下記のサイトのような挙動にできればと思っております。
|
|
44
106
|
|
|
45
107
|
|
|
46
108
|
|
|
@@ -62,7 +124,19 @@
|
|
|
62
124
|
|
|
63
125
|
|
|
64
126
|
|
|
127
|
+
###お知恵を拝借したいこと
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
今回お知恵を拝借したいことは、**画面上部にfixedされたinput要素（もしくは、fixedされた要素内のinput要素）がfocusされた時の強制スクロールを止める方法**です。
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
冒頭に記載した参考サイトを見ても解決しないため、HTML,CSSで制御するのは難しいのではないかなと思っています。
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
|
|
65
|
-
HTML,CSS,jqueryをいじって解決できるのであれば、それが1番ですが、
|
|
139
|
+
HTML,CSS,jqueryをいじって解決できるのであれば、それが1番ですが、JSライブラリや、何かヒントになるページをご紹介いただければと思っております。
|
|
66
140
|
|
|
67
141
|
|
|
68
142
|
|
2
リンク修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -6,11 +6,11 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
参考:[
|
|
9
|
+
参考:[position:fixedしている要素内のinputにフォーカスが入ると、ページトップへスクロールしてしまう](https://teratail.com/questions/22695)
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
参考:[
|
|
13
|
+
参考:[ios8でpositionfixedなheaderに付けたinputにフォーカスを当てると一番上までスクロールしてしまう](http://ja.stackoverflow.com/questions/2979/ios8でpositionfixedなheaderに付けたinputにフォーカスを当てると一番上までスクロールしてしまう)
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
|
|
33
33
|
|
|
34
34
|
|
|
35
|
-
参考:[
|
|
35
|
+
参考:[https://moriawase.net/fixed-header-slide-menu](https://moriawase.net/fixed-header-slide-menu)
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
|
|
@@ -44,11 +44,11 @@
|
|
|
44
44
|
|
|
45
45
|
|
|
46
46
|
|
|
47
|
-
ノマド的節約術
|
|
47
|
+
[ノマド的節約術](https://nomad-saving.com)
|
|
48
48
|
|
|
49
49
|
|
|
50
50
|
|
|
51
|
-
朝日新聞デジタル
|
|
51
|
+
[朝日新聞デジタル](http://www.asahi.com/sp/)
|
|
52
52
|
|
|
53
53
|
|
|
54
54
|
|
1
リンク追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -6,11 +6,11 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
参考:https://teratail.com/questions/22695
|
|
9
|
+
参考:[リンク内容](https://teratail.com/questions/22695)
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
参考:http://ja.stackoverflow.com/questions/2979/ios8でpositionfixedなheaderに付けたinputにフォーカスを当てると一番上までスクロールしてしまう
|
|
13
|
+
参考:[リンク内容](http://ja.stackoverflow.com/questions/2979/ios8でpositionfixedなheaderに付けたinputにフォーカスを当てると一番上までスクロールしてしまう)
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
|
|
33
33
|
|
|
34
34
|
|
|
35
|
-
参考:https://moriawase.net/fixed-header-slide-menu
|
|
35
|
+
参考:[リンク内容](https://moriawase.net/fixed-header-slide-menu)
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
|
|
@@ -44,11 +44,11 @@
|
|
|
44
44
|
|
|
45
45
|
|
|
46
46
|
|
|
47
|
-
ノマド的節約術:https://nomad-saving.com
|
|
47
|
+
ノマド的節約術:[リンク内容](https://nomad-saving.com)
|
|
48
48
|
|
|
49
49
|
|
|
50
50
|
|
|
51
|
-
朝日新聞デジタル:http://www.asahi.com/sp/
|
|
51
|
+
朝日新聞デジタル:[リンク内容](http://www.asahi.com/sp/)
|
|
52
52
|
|
|
53
53
|
|
|
54
54
|
|