teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

内容修正

2017/03/02 12:03

投稿

chef
chef

スコア15

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
- HTML,CSS,jqueryいじって解決できるのであれば、それが1番ですが、私のレベルで難いようでしら、JSライブラリや、何かヒントになるページをご紹介ただければ思っております。
64
+ ###お知恵拝借したい
34
65
 
66
+ 今回お知恵を拝借したいことは、**画面上部にfixedされたinput要素(もしくは、fixedされた要素内のinput要素)がfocusされた時の強制スクロールを止める方法**です。
67
+
68
+ 冒頭に記載した参考サイトを見ても解決しないため、HTML,CSSで制御するのは難しいのではないかなと思っています。
69
+
70
+ HTML,CSS,jqueryをいじって解決できるのであれば、それが1番ですが、JSライブラリや、何かヒントになるページをご紹介いただければと思っております。
71
+
35
72
  何卒よろしくお願い申し上げます。

2

リンク修正

2017/03/02 12:03

投稿

chef
chef

スコア15

title CHANGED
File without changes
body CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
  類似の質問に対しての回答を参考にしても解決できなかったため質問させていただきます。
4
4
 
5
- 参考:[リンク](https://teratail.com/questions/22695)
5
+ 参考:[position:fixedしている要素のinputにフォーカスが入ると、ページトップへスクロールしてしまう](https://teratail.com/questions/22695)
6
6
 
7
- 参考:[リン内容](http://ja.stackoverflow.com/questions/2979/ios8でpositionfixedなheaderに付けたinputにフォーカスを当てると一番上までスクロールしてしまう)
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
- 参考:[リンク内容](https://moriawase.net/fixed-header-slide-menu)
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
- ノマド的節約術:[リンク内容](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
 

1

リンク追加

2017/02/27 12:13

投稿

chef
chef

スコア15

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