質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

4553閲覧

Jqueryでページ下部に100px程度スクロールした場合に、テーブル要素のtr属性を固定したい

abab7200

総合スコア120

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/01/25 02:16

編集2018/01/25 05:34

●やりたいこと●
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'); } }); });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

JavaScript

1 //$nav = $('tr'), 2 $nav = $('thead'),

-- HTML追記

HTML

1<!DOCTYPE html> 2<html> 3<head><meta charset="UTF-8" /><title>title</title> 4<style> 5.is-fixed { 6 position: fixed; 7 top: 0; 8 left: 0; 9 z-index: 2; 10 width: 100%; 11} 12</style> 13</head> 14<body> 15<table> 16 <thead> 17 <tr> 18 <th>id</th> 19 <th>タイトル</th> 20 </tr> 21 </thead> 22 <tbody> 23 <tr> 24 <td>1</td> 25 <td>プログラミング全般</td> 26 </tr> 27 <tr> 28 <td>2</td> 29 <td>PHP</td> 30 </tr> 31 </tbody> 32</table> 33<main style="height:200vh"><p>main</p></main> 34<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 35<script> 36$(function() { 37 var $win = $(window), 38 $main = $('main'), 39 $nav = $('thead'), 40 navHeight = $nav.outerHeight(), 41 navPos = $nav.offset().top, 42 fixedClass = 'is-fixed'; 43 44 $win.on('load scroll', function() { 45 var value = $(this).scrollTop(); 46 if ( value > navPos ) { 47 $nav.addClass(fixedClass); 48 $main.css('margin-top', navHeight); 49 console.log("動作せず") 50 } else { 51 $nav.removeClass(fixedClass); 52 $main.css('margin-top', '0'); 53 } 54 }); 55}); 56</script> 57</body> 58</html>

投稿2018/01/25 03:21

編集2018/01/25 05:49
x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/01/25 03:42

そういえばHTMLも<tr class="is-fixed">と全角スペースが入っているので直してください
abab7200

2018/01/25 05:37

失礼いたしました。 全角スペースを修正しました
abab7200

2018/01/25 05:40

頂いたコードを試しましたが、addClassの部分が動作しない為、 スクロールしても、is-fixedが追加されませんでした。 追加でこちらから必要な情報があればご連絡ください。 $(function() { var $win = $(window), $main = $('main'), $nav = $('thead'), navHeight = $nav.outerHeight(), navPos = $nav.offset().top, fixedClass = 'is-fixed'; $win.on('load scroll', function() { var value = $(this).scrollTop(); console.log("動作済み") if ( value > navPos ) { $nav.addClass(fixedClass); $main.css('margin-top', navHeight); console.log("動作せず") } else { $nav.removeClass(fixedClass); console.log("動作済み") $main.css('margin-top', '0'); } }); });
x_x

2018/01/25 05:51

念のためHTMLを追記しましたが、スクリプトの変更点は回答したところだけです。
guest

0

ウィンドウのスクロール量は、jQueryを使って以下のようにscrollTop()を使って取得できます。

js

1var windowScroll = $(window).scrollTop();

https://api.jquery.com/scrollTop/

特定の要素にクラスを付与するのは、以下のようにaddClass()を使って行うことができます。

js

1var firstRow = $("thead > tr:first-child");// 任意のセレクタで要素を取得してください 2firstRow.addClass("is-fixed");

https://api.jquery.com/addClass/

あとは、画面がスクロールされたタイミングでスクロール量を調べ、100pxを超えて入ればクラスを付与する、という手順で実現できると思います。

js

1$(window).on("scroll", function(){ 2 var windowScroll = $(window).scrollTop(); 3 if( windowScroll > 100 ){ 4 $("thead > tr:first-child").addClass("is-fixed"); 5 } 6}); 7

投稿2018/01/25 02:49

mooey

総合スコア200

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

abab7200

2018/01/25 03:30

すいません、理解できておらず申し訳ございません。 いただいたコードで $(window).onがそもそも発火しないのですが、 読み込んでいるjqueryのバージョンが間違いなのでしょうか? 念のため1系 2系 3系を読み込んだのですが スクロールした際にイベント発火されませんでした。 ``` console.log("表示される") $(window).on("scroll", function(){ console.log("表示されない") var windowScroll = $(window).scrollTop(); console.log("表示されない") if( windowScroll > 100 ){ console.log("ss") $("thead > tr:first-child").addClass("is-fixed"); } }); ```
mooey

2018/01/25 03:35

現行のバージョンであれば動くはずです。 jQueryは読み込めていますよね? その真下で`$(window).trigger("scroll");`などとしてみても変化ないですか? またブラウザのコンソールにエラーは出ていませんか?
abab7200

2018/01/25 05:00 編集

下記のJSを読み込んだ際に console.log("a")はコンソール上で表示されますが bとcは表示されないので、スクロール時のイベントが発火しておりません。 ``` test.js console.log("a") $(window).scroll(function() { console.log("b") var windowScroll = $(window).scrollTop(); if( windowScroll > 100 ){ console.log("c") $("thead > tr:first-child").addClass("is-fixed"); } }); ``` html ``` <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="../test/js/test.js"></script> </head> 中間コンテンツのコード省略 <table> <thead> <tr class="is-fixed"> <th>id</th> <th>タイトル</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>プログラミング全般</td> </tr> <tr> <td>2</td> <td>PHP</td> </tr> </tbody> </table> ```
abab7200

2018/01/25 05:06

またコンソール上でもエラーは出ておりません。
guest

0

自己解決

試行錯誤の末下記で対応できました

$(function() { var tabbody = $('.tabbody'); tabbody.scroll(function () { if ($(this).scrollTop() > 100) { $('#test-id').addClass('is-fixed'); } else { $('#test-id').removeClass('is-fixed'); } }); });

投稿2018/01/25 06:17

abab7200

総合スコア120

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/01/25 06:25

突然tabbodyが出てこられても……HTMLは提示できないのですか?
sk_3122

2018/01/25 07:10

.tabbody の scroll で解決したということは、画面上に overflow:scroll; とかの要素があって 出ていたスクロールバーは ブラウザのスクロールバーではなく、その要素のスクロールバーだったということでしょうか。 それはまあ $(window).on("scroll", function() {}) は反応しませんね
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問