質問編集履歴
2
全角修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
```html
|
|
9
9
|
<table>
|
|
10
10
|
<thead>
|
|
11
|
-
<tr
|
|
11
|
+
<tr class="is-fixed">
|
|
12
12
|
<th>id</th>
|
|
13
13
|
<th>タイトル</th>
|
|
14
14
|
</tr>
|
1
ｊｓコード追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -2,8 +2,7 @@
|
|
|
2
2
|
bodyにテーブルがあり、テーブルの行数が多い為、htmlページである程度スクロールした際に
|
|
3
3
|
テーブルの1行目のtrを固定したいと考えている。
|
|
4
4
|
|
|
5
|
-
jqueryとjavascriptの設定を調べたのですが、nav要素などへの適用で階層構造の設定が理解できませんした。設定的にはスクロールした際にis-fixed を適用する形になると思いますが、
|
|
6
|
-
jquery
|
|
5
|
+
[参考サイト](https://www.nxworld.net/tips/stikcy-or-change-header-and-navigation-when-scrolling-using-jquery.html)の内容を元に設定を行ったのですが、動作しませんでしたので、どなたかご指摘いただければ幸いです
|
|
7
6
|
|
|
8
7
|
|
|
9
8
|
```html
|
|
@@ -38,4 +37,28 @@
|
|
|
38
37
|
width: 100%;
|
|
39
38
|
}
|
|
40
39
|
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
js
|
|
43
|
+
```
|
|
44
|
+
$(function() {
|
|
45
|
+
var $win = $(window),
|
|
46
|
+
$main = $('main'),
|
|
47
|
+
$nav = $('tr'),
|
|
48
|
+
navHeight = $nav.outerHeight(),
|
|
49
|
+
navPos = $nav.offset().top,
|
|
50
|
+
fixedClass = 'is-fixed';
|
|
51
|
+
|
|
52
|
+
$win.on('load scroll', function() {
|
|
53
|
+
var value = $(this).scrollTop();
|
|
54
|
+
if ( value > navPos ) {
|
|
55
|
+
$nav.addClass(fixedClass);
|
|
56
|
+
$main.css('margin-top', navHeight);
|
|
57
|
+
} else {
|
|
58
|
+
$nav.removeClass(fixedClass);
|
|
59
|
+
$main.css('margin-top', '0');
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
});
|
|
63
|
+
|
|
41
64
|
```
|