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

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

ただいまの
回答率

87.48%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,747

score 118

●やりたいこと●
bodyにテーブルがあり、テーブルの行数が多い為、htmlページである程度スクロールした際に
テーブルの1行目のtrを固定したいと考えている。

参考サイトの内容を元に設定を行ったのですが、動作しませんでしたので、どなたかご指摘いただければ幸いです

<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>
.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}

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');
    }
  });
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+2

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

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

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

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/25 12: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");
    }
    });
    ```

    キャンセル

  • 2018/01/25 12:35

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

    キャンセル

  • 2018/01/25 14: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>
    ```

    キャンセル

  • 2018/01/25 14:06

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

    キャンセル

+2

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

-- HTML追記

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title>
<style>
.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <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>
<main style="height:200vh"><p>main</p></main>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(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();
    if ( value > navPos ) {
      $nav.addClass(fixedClass);
      $main.css('margin-top', navHeight);
      console.log("動作せず")
    } else {
      $nav.removeClass(fixedClass);
      $main.css('margin-top', '0');
    }
  });
});
</script>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/25 12:42

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

    キャンセル

  • 2018/01/25 14:37

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

    キャンセル

  • 2018/01/25 14: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');
    }
    });
    });

    キャンセル

  • 2018/01/25 14:51

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

    キャンセル

check解決した方法

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 15:25

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

    キャンセル

  • 2018/01/25 16:10

    .tabbody の scroll で解決したということは、画面上に overflow:scroll; とかの要素があって
    出ていたスクロールバーは ブラウザのスクロールバーではなく、その要素のスクロールバーだったということでしょうか。

    それはまあ $(window).on("scroll", function() {}) は反応しませんね

    キャンセル

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

  • ただいまの回答率 87.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る