●やりたいこと●
bodyにテーブルがあり、テーブルの行数が多い為、htmlページである程度スクロールした際に
テーブルの1行目のtrを固定したいと考えている。
参考サイトの内容を元に設定を行ったのですが、動作しませんでしたので、どなたかご指摘いただければ幸いです
html
1<table> 2 <thead> 3 <tr class="is-fixed"> 4 <th>id</th> 5 <th>タイトル</th> 6 </tr> 7 </thead> 8 <tbody> 9 <tr> 10 <td>1</td> 11 <td>プログラミング全般</td> 12 </tr> 13 <tr> 14 <td>2</td> 15 <td>PHP</td> 16 </tr> 17 </tbody> 18</table> 19
CSS
1 2.is-fixed { 3 position: fixed; 4 top: 0; 5 left: 0; 6 z-index: 2; 7 width: 100%; 8} 9
js
$(function() { var $win = $(window), $main = $('main'), $nav = $('tr'), navHeight = $nav.outerHeight(), navPos = $nav.offset().top, fixedClass = 'is-fixed'; $win.on('load scroll', function() { var value = $(this).scrollTop(); if ( value > navPos ) { $nav.addClass(fixedClass); $main.css('margin-top', navHeight); } else { $nav.removeClass(fixedClass); $main.css('margin-top', '0'); } }); });
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/25 03:42
2018/01/25 05:37
2018/01/25 05:40
2018/01/25 05:51