teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問トグルメニューをクリックで開いた時の高さを取得したい

編集履歴

質問編集履歴

1

コードを修正しました

2017/02/25 07:03

投稿

asako-
asako-

スコア21

test CHANGED
@@ -1 +1 @@
1
- fixed固定させた要素内のナビゲーションをスクロールさせたい
1
+ トグルメニューをクリックで開いた時の高さを取得したい
test CHANGED
@@ -1,20 +1,20 @@
1
- レスポンシブ対応のサイトで、ナビゲーションを
1
+ fixed固定させたheader内にトグルメニューがあります。
2
2
 
3
- 幅741px以上の場合は、サイドに固定
3
+ headerを通常はheight: auto;とし、
4
4
 
5
- 幅740px以下の場合に、トグルメニューでスライドで開閉
5
+ メニューを開いた際のheaderの高さが、ウィンドウの高さより高くなる場合は
6
6
 
7
- に切り替える仕様にしています。
8
-
9
- 尚、ヘッダーは幅740px以下の場合、position: fixed;で上部固定にしています。
7
+ メニューを開いた時にだけ、height: 100%; overflow-y: scroll; としてスクロール可能にしたいと思っています。
10
8
 
11
9
 
12
10
 
13
- トグルメニューの場合に、クリックで展開されるナビゲーションの高さがウィンドウの高さを超える場合は、スクロールさせたいのですが、うまくいかず質問させていただきました。
11
+ jQueryでメニューを開いた際のheaderの高さが、ウィンドウの高さより高くなる場合にだけ、
14
12
 
13
+ headerにscrollHeaderをいうクラスを追加して、.scrollHeaderにheight: 100%; overflow-y: scroll;を指定したいのですが、
15
14
 
15
+ 以下のjavascriptの記述では、headerHeightがメニューを開く前の高さを取得してしまうようです。
16
16
 
17
-
17
+ headerHeightにメニューを開いた時の高さを取得するにはどうしたらよいのでしょうか？
18
18
 
19
19
 
20
20
 
@@ -56,16 +56,6 @@
56
56
 
57
57
  </ul>
58
58
 
59
- <ul class="gNav-sub">
60
-
61
- <li><a href="#">ナビ</a></li>
62
-
63
- <li><a href="#">ナビ</a></li>
64
-
65
- <li><a href="#">ナビ</a></li>
66
-
67
- </ul>
68
-
69
59
  </nav>
70
60
 
71
61
  </div>
@@ -90,25 +80,11 @@
90
80
 
91
81
 
92
82
 
93
- $(".navBox a").click(function() {
94
-
95
- $(".navBox").slideUp();
96
-
97
- $(".navicon").removeClass("active");
98
-
99
- });
100
-
101
-
102
-
103
-
104
-
105
- var windowWidth = window.innerWidth;
106
-
107
83
  var windowHeight = window.innerHeight;
108
84
 
109
85
  var headerHeight = $("#header").innerHeight();
110
86
 
111
- if (windowWidth <= 740 && windowHeight < headerHeight) {
87
+ if (windowHeight < headerHeight) {
112
88
 
113
89
  $("#header").toggleClass("scrollHeader");
114
90
 
@@ -130,13 +106,11 @@
130
106
 
131
107
  #header {
132
108
 
133
- width: 260px;
109
+ width: 100%;
134
110
 
135
- height: 100%;
111
+ height: auto;
136
112
 
137
113
  background: #000;
138
-
139
- border-right: 1px solid #ddd;
140
114
 
141
115
  position: fixed;
142
116
 
@@ -146,59 +120,27 @@
146
120
 
147
121
  z-index: 10;
148
122
 
123
+ }
124
+
125
+
126
+
127
+ #header.scrollHeader {
128
+
129
+ height: 100%;
130
+
149
131
  overflow-y: scroll;
150
132
 
151
133
  }
152
134
 
135
+
153
136
 
154
-
155
- .navicon {
137
+ .navBox {
156
138
 
157
139
  display: none;
158
140
 
159
141
  }
160
142
 
161
143
 
162
-
163
- @media screen and (max-width: 740px) {
164
-
165
- #header {
166
-
167
- width: 100%;
168
-
169
- height: auto;
170
-
171
- border-right: 0;
172
-
173
- }
174
-
175
-
176
-
177
- #header.scrollHeader {
178
-
179
- height: 100%;
180
-
181
- }
182
-
183
-
184
-
185
- .navicon {
186
-
187
- display: block;
188
-
189
- }
190
-
191
-
192
-
193
- /* navBox --------------------*/
194
-
195
- .navBox {
196
-
197
- display: none;
198
-
199
- }
200
-
201
- }
202
144
 
203
145
 
204
146