質問編集履歴
3
タグを追加しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|
2
htmlの記述を追加しました。
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
JavaScriptで、offsetの値が取得できません。
|
body
CHANGED
|
@@ -3,20 +3,51 @@
|
|
|
3
3
|
クリックイベントを取得した際に、コンテンツ全体を表示させようとしております。
|
|
4
4
|
|
|
5
5
|
###行ったこと
|
|
6
|
+
```html
|
|
7
|
+
<html>
|
|
8
|
+
<head>
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<section class="block">
|
|
12
|
+
<div class="block__element">
|
|
13
|
+
<div class="block__elementArea">
|
|
14
|
+
<p>ここにコンテンツが入ります。</p>
|
|
15
|
+
<p>ここにコンテンツが入ります。</p>
|
|
16
|
+
<p>ここにコンテンツが入ります。</p>
|
|
17
|
+
<p>ここにコンテンツが入ります。</p>
|
|
18
|
+
<p>ここにコンテンツが入ります。</p>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
</section>
|
|
22
|
+
<section class="block">
|
|
23
|
+
<div class="block__elementArea">
|
|
24
|
+
<div class="">
|
|
25
|
+
<p>ここにコンテンツが入ります。</p>
|
|
26
|
+
<p>ここにコンテンツが入ります。</p>
|
|
27
|
+
<p>ここにコンテンツが入ります。</p>
|
|
28
|
+
<p>ここにコンテンツが入ります。</p>
|
|
29
|
+
<p>ここにコンテンツが入ります。</p>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</section>
|
|
33
|
+
</body>
|
|
34
|
+
</html>
|
|
35
|
+
```
|
|
36
|
+
|
|
6
37
|
```Javascript
|
|
7
38
|
$(function(){
|
|
8
|
-
$('.
|
|
39
|
+
$('.block > .block__element').each(function(){
|
|
9
40
|
var $target = $(this);
|
|
10
41
|
var $h = $target.height();
|
|
11
42
|
if ($h > 100) {
|
|
12
|
-
$target.addClass('
|
|
43
|
+
$target.addClass('hidden block__elementArea');
|
|
13
44
|
$target.append(
|
|
14
45
|
'<a class="clickArea clickArea--before j-areaToggle"></a>'
|
|
15
46
|
);
|
|
16
47
|
$target.find('.j-areaToggle').on('click', function(){
|
|
17
|
-
var $position = $target.offset().top -
|
|
48
|
+
var $position = $target.offset().top - 80;
|
|
18
49
|
var $scrollTag = ( window.chrome || 'WebkitAppearance' in document.documentElement.style )? 'body' : 'html';
|
|
19
|
-
$target.toggleClass('
|
|
50
|
+
$target.toggleClass('hidden');
|
|
20
51
|
$target.find('.clickArea').toggleClass('clickArea--before');
|
|
21
52
|
$target.find('.clickArea').toggleClass('clickArea--after');
|
|
22
53
|
$($scrollTag).animate({scrollTop: $position}, 200);
|
|
@@ -29,7 +60,7 @@
|
|
|
29
60
|
```
|
|
30
61
|
|
|
31
62
|
###問題
|
|
32
|
-
一部の環境で.
|
|
63
|
+
一部の環境で.block__elementのoffsetの値がうまく取得できない。
|
|
33
64
|
|
|
34
65
|
具体的には、クリックイベントを実行するたびに、`$position`の値が変化してしまいます。
|
|
35
66
|
|
1
環境の説明を追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -37,5 +37,7 @@
|
|
|
37
37
|
- ブラウザ：chrome
|
|
38
38
|
- デバイス：SP（android）
|
|
39
39
|
|
|
40
|
+
※ブラウザがsafariの場合、デバイスがPCの場合は、正常に`$position`を取得できております。
|
|
41
|
+
|
|
40
42
|
---
|
|
41
43
|
初めての質問で至らない点があると思いますが、ご教授お願い致します。
|