IE11でposition: sticky を利用できるようにするには

ブラウザ：IE11

スクロールバーの最初の要素を固定にしたくCSSにて

CSS
1tbody tr td:first-of-type {/*最初の要素を固定する*/
2  background-color: #eee;
3  position: sticky;
4  left: -1px;
5  text-align: left;
6}

としました。しかし、googleChromeでは固定できたのですが、IE11
では固定されなく、「stickyfill.min.js」をダウンロードして、

javascript
1<script lang="javascript" type="text/javascript">
2    Stickyfill.add(document.querySelectorAll('.クラス名'));
3</script>

と読み込ませてみたのですが、固定されません。
javascriptエラーも出ていないのですが、どうしたら固定できるように
なるでしょうか？

html
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="utf-8">
4<script src="scripts/stickyfill.min.js" type="text/javascript"></script>
5<script lang="javascript" type="text/javascript">
6	Stickyfill.add(document.querySelectorAll('.table1'));
7</script>
8
9<style type="text/css">
10.table-wrapper {/*table全体のラッパー。スクロールを表示する*/
11  max-width: 500px;
12  overflow: scroll;
13}
14 
15table {
16  position: relative;
17  border: 1px solid #ddd;
18  border-collapse: collapse;
19}
20 
21td, th {
22  white-space: nowrap;
23  border: 1px solid #ddd;
24  padding: 20px;
25  text-align: center;
26}
27 
28th {
29  background-color: #eee;
30  position: sticky;
31  top: -1px;
32  z-index: 2;
33}
34 
35th:first-of-type {
36  left: 0;
37  z-index: 3;
38}
39 
40tbody tr td:first-of-type {/*最初の要素を固定する*/
41  background-color: #eee;
42  position: sticky;
43  left: -1px;
44  text-align: left;
45}
46</style>
47
48<div class="table1">
49  <table>
50  <thead>
51    <tr>
52      <th></th>
53      <th>A</th>
54      <th>B</th>
55      <th>C</th>
56  .
57  .
58  .
59    </tr>
60  </thead>
61  <tbody>
62    <tr>
63      <td>あいう</td>
64      <td>かきく</td>
65      <td>さしす</td>
66  .
67  .
68  .
69</table>
70</div>

stickyfill.min.js
1/*!
2  * Stickyfill ? `position: sticky` polyfill
3  * v. 2.1.0 | https://github.com/wilddeer/stickyfill
4  * MIT License
5  */
6!function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function d(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c])}function e(a){return parseFloat(a)||0}function f(a){for(var b=0;a;)b+=a.offsetTop,a=a.offsetParent;return b}function g(){function c(){a.pageXOffset!=m.left?(m.top=a.pageYOffset,m.left=a.pageXOffset,p.refreshAll()):a.pageYOffset!=m.top&&(m.top=a.pageYOffset,m.left=a.pageXOffset,n.forEach(function(a){return a._recalcPosition()}))}function d(){f=setInterval(function(){n.forEach(function(a){return a._fastCheck()})},500)}function e(){clearInterval(f)}if(!k){k=!0,c(),a.addEventListener("scroll",c),a.addEventListener("resize",p.refreshAll),a.addEventListener("orientationchange",p.refreshAll);var f=void 0,g=void 0,h=void 0;"hidden"in b?(g="hidden",h="visibilitychange"):"webkitHidden"in b&&(g="webkitHidden",h="webkitvisibilitychange"),h?(b[g]||d(),b.addEventListener(h,function(){b[g]?e():d()})):d()}}var h=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),i=!1,j="undefined"!=typeof a;j&&a.getComputedStyle?!function(){var a=b.createElement("div");["","-webkit-","-moz-","-ms-"].some(function(b){try{a.style.position=b+"sticky"}catch(a){}return""!=a.style.position})&&(i=!0)}():i=!0;var k=!1,l="undefined"!=typeof ShadowRoot,m={top:null,left:null},n=[],o=function(){function g(a){if(c(this,g),!(a instanceof HTMLElement))throw new Error("First argument must be HTMLElement");if(n.some(function(b){return b._node===a}))throw new Error("Stickyfill is already applied to this node");this._node=a,this._stickyMode=null,this._active=!1,n.push(this),this.refresh()}return h(g,[{key:"refresh",value:function(){if(!i&&!this._removed){this._active&&this._deactivate();var c=this._node,g=getComputedStyle(c),h={position:g.position,top:g.top,display:g.display,marginTop:g.marginTop,marginBottom:g.marginBottom,marginLeft:g.marginLeft,marginRight:g.marginRight,cssFloat:g.cssFloat};if(!isNaN(parseFloat(h.top))&&"table-cell"!=h.display&&"none"!=h.display){this._active=!0;var j=c.style.position;"sticky"!=g.position&&"-webkit-sticky"!=g.position||(c.style.position="static");var k=c.parentNode,m=l&&k instanceof ShadowRoot?k.host:k,n=c.getBoundingClientRect(),o=m.getBoundingClientRect(),p=getComputedStyle(m);this._parent={node:m,styles:{position:m.style.position},offsetHeight:m.offsetHeight},this._offsetToWindow={left:n.left,right:b.documentElement.clientWidth-n.right},this._offsetToParent={top:n.top-o.top-e(p.borderTopWidth),left:n.left-o.left-e(p.borderLeftWidth),right:-n.right+o.right-e(p.borderRightWidth)},this._styles={position:j,top:c.style.top,bottom:c.style.bottom,left:c.style.left,right:c.style.right,width:c.style.width,marginTop:c.style.marginTop,marginLeft:c.style.marginLeft,marginRight:c.style.marginRight};var q=e(h.top);this._limits={start:n.top+a.pageYOffset-q,end:o.top+a.pageYOffset+m.offsetHeight-e(p.borderBottomWidth)-c.offsetHeight-q-e(h.marginBottom)};var r=p.position;"absolute"!=r&&"relative"!=r&&(m.style.position="relative"),this._recalcPosition();var s=this._clone={};s.node=b.createElement("div"),d(s.node.style,{width:n.right-n.left+"px",height:n.bottom-n.top+"px",marginTop:h.marginTop,marginBottom:h.marginBottom,marginLeft:h.marginLeft,marginRight:h.marginRight,cssFloat:h.cssFloat,padding:0,border:0,borderSpacing:0,fontSize:"1em",position:"static"}),k.insertBefore(s.node,c),s.docOffsetTop=f(s.node)}}}},{key:"_recalcPosition",value:function(){if(this._active&&!this._removed){var a=m.top<=this._limits.start?"start":m.top>=this._limits.end?"end":"middle";if(this._stickyMode!=a){switch(a){case"start":d(this._node.style,{position:"absolute",left:this._offsetToParent.left+"px",right:this._offsetToParent.right+"px",top:this._offsetToParent.top+"px",bottom:"auto",width:"auto",marginLeft:0,marginRight:0,marginTop:0});break;case"middle":d(this._node.style,{position:"fixed",left:this._offsetToWindow.left+"px",right:this._offsetToWindow.right+"px",top:this._styles.top,bottom:"auto",width:"auto",marginLeft:0,marginRight:0,marginTop:0});break;case"end":d(this._node.style,{position:"absolute",left:this._offsetToParent.left+"px",right:this._offsetToParent.right+"px",top:"auto",bottom:0,width:"auto",marginLeft:0,marginRight:0})}this._stickyMode=a}}}},{key:"_fastCheck",value:function(){this._active&&!this._removed&&(Math.abs(f(this._clone.node)-this._clone.docOffsetTop)>1||Math.abs(this._parent.node.offsetHeight-this._parent.offsetHeight)>1)&&this.refresh()}},{key:"_deactivate",value:function(){var a=this;this._active&&!this._removed&&(this._clone.node.parentNode.removeChild(this._clone.node),delete this._clone,d(this._node.style,this._styles),delete this._styles,n.some(function(b){return b!==a&&b._parent&&b._parent.node===a._parent.node})||d(this._parent.node.style,this._parent.styles),delete this._parent,this._stickyMode=null,this._active=!1,delete this._offsetToWindow,delete this._offsetToParent,delete this._limits)}},{key:"remove",value:function(){var a=this;this._deactivate(),n.some(function(b,c){if(b._node===a._node)return n.splice(c,1),!0}),this._removed=!0}}]),g}(),p={stickies:n,Sticky:o,forceSticky:function(){i=!1,g(),this.refreshAll()},addOne:function(a){if(!(a instanceof HTMLElement)){if(!a.length||!a[0])return;a=a[0]}for(var b=0;b<n.length;b++)if(n[b]._node===a)return n[b];return new o(a)},add:function(a){if(a instanceof HTMLElement&&(a=[a]),a.length){for(var b=[],c=function(c){var d=a[c];return d instanceof HTMLElement?n.some(function(a){if(a._node===d)return b.push(a),!0})?"continue":void b.push(new o(d)):(b.push(void 0),"continue")},d=0;d<a.length;d++){c(d)}return b}},refreshAll:function(){n.forEach(function(a){return a.refresh()})},removeOne:function(a){if(!(a instanceof HTMLElement)){if(!a.length||!a[0])return;a=a[0]}n.some(function(b){if(b._node===a)return b.remove(),!0})},remove:function(a){if(a instanceof HTMLElement&&(a=[a]),a.length)for(var b=function(b){var c=a[b];n.some(function(a){if(a._node===c)return a.remove(),!0})},c=0;c<a.length;c++)b(c)},removeAll:function(){for(;n.length;)n[0].remove()}};i||g(),"undefined"!=typeof module&&module.exports?module.exports=p:j&&(a.Stickyfill=p)}(window,document);

「stickyfill.min.js」はstickyfill-masterを解凍して
「dist/stickyfill.min.js」を「scripts」にコピーして利用しています。
どなかたご教授を宜しくお願い致します。

Lhankor_Mhy

2020/07/30 04:59

stickyfill.min.js のドキュメントをご提示ください。

kumakumatan

2020/07/30 05:10

「stickyfill.min.js」を掲示しました。こちらでよろしいでしょうか。宜しくお願いします。

Lhankor_Mhy

2020/07/30 05:13

ありがとうございます。ドキュメントに書かれている、left が使えない、というのはご認識されているのですよね？

kumakumatan

2020/07/30 05:16

ありがとうございます。認識していないです・・。「left: -1px;」が悪さをしているとかですか？

Lhankor_Mhy

2020/07/30 05:25

いえ、使えなくても都合が悪くないのであれば、それでいいと思います。問題を認識しました。

行動規範の内容に同意します

回答4件

HTML の HEAD に書く document.querySelectorAll(`.table1`) は null になるはずです。

HTML
1<script lang="javascript" type="text/javascript">
2    var tables = document.querySelectorAll('.table1');
3    console.log( tables ); // null
4    Stickyfill.add( tables );
5</script>

次のいずれかを試してください。

DOMContentLoaded 以降で実行するように書き換える。
scriptを body.lastChild に置く。

追記）

1. DOMContentLoaded　を使う

HTML
1<script lang="javascript" type="text/javascript">
2  window.addEventListener("DOMContentLoaded", function(){
3    Stickyfill.add( document.querySelectorAll('.table1') );
4  });
5</script>

JavaScriptは <script> が読まれた直後に実行しますが、一部のAPIはすぐに使えません。

DOM操作用の機能： HTML全体が読み込みを終了してから利用可能になる（DOMContentLoaded）
HTML5APIの機能：表示するページ用に初期化が終わて利用可能になる（load）

※噛み砕いた説明ですので、DOM操作用の機能やHTML5APIの機能は正式な分類名ではありません。

2. BODYの最後に置く

HTML
1<script lang="javascript" type="text/javascript">
2  Stickyfill.add( document.querySelectorAll('.table1') );
3</script>
4</body>

HTML文書は、それぞれのタグが、親子、兄弟のように表現されますが、それぞれの誕生順でJavaScriptから操作できるようになります。この特徴を活かして<script>要素を後から書くようにすると、DOM操作（document.querySelectorAll()もそのひとつ）を使って、要素に対する操作ができるようになります。

投稿2020/07/30 08:11

編集2020/07/30 08:30

AkitoshiManabe

総合スコア5434

kumakumatan

2020/07/30 08:15

ご回答ありがとうございます。すいませんが、具体的にどうやるのかご教示いただけますでしょうか？宜しくお願い致します。

kumakumatan

2020/07/30 23:50 編集

ご丁寧なご回答ありがとうございます。 1と2を試したのですが、固定されないです・・。画面表示後に開発者コンソールから「Stickyfill.add( document.querySelectorAll('.table-wrapper') );」と入力して適用させたのですが、固定されないです・・。実行後、エラーなどは表示されていません。宜しくお願いします。

行動規範の内容に同意します

こんにちは。

DOMが準備できていないうちに実行しているのが原因です。
Stickyfill.add(document.querySelectorAll('.table1'));をbodyの最後に置くか、ロードイベントハンドラ内に置いてください。

ところで、Stickyfill.add(document.querySelectorAll('.table1'));となっているのに対して、CSSはthにstickyを指定しているのが気になりました。

投稿2020/07/30 08:06

Lhankor_Mhy

総合スコア36960

kumakumatan

2020/07/30 08:16

ご回答ありがとうございます。 >Stickyfill.add(document.querySelectorAll('.table1'));をbodyの最後に置くか、 >ロードイベントハンドラ内すいませんが、具体的にどうやるのかご教示いただけますでしょうか？宜しくお願い致します。

Lhankor_Mhy

2020/07/30 08:21 編集

Lhankor_Mhy

2020/07/30 08:28

難しいかな……？ </body> は body の終わりを示すタグなんです。なので、その直前に書いてある要素は、bodyの最後にある要素、ということになります。これは基本なので、がんばって理解していただくしかないですね……

kumakumatan

2020/07/30 23:52

ご回答ありがとうございます。試してみたのですが、駄目でした・・。 >Stickyfill.add(document.querySelectorAll('.table1'));となっているのに対して、 >CSSはthにstickyを指定しているのが気になりました。ここが影響しているのでしょうか？どのような意味かご教示いただけますでしょうか。

Lhankor_Mhy

2020/07/31 01:27

そうでしたか、当方の環境（win10,IE11）では動作しています。もしかして、現在のスクリプト要素の下に</body>を追加したりしていませんか？そのダメだったコードをご提示いただけますか？ >どのような意味か Stickyfill.add(document.querySelectorAll('.table1')) は、.table1 についてstickyを付していますが、 th { position: sticky; } は、th についてstickyを付しています。全然違うことをしているので、大丈夫なのかな、と。

行動規範の内容に同意します

stickyfill.min.jsの中身をちょっとだけ見たところ、テーブル対応は微妙っぽい
と思ったので（真相は不明）Javascriptで適当にそれっぽいものを自作
（家のIE11では動作しましたが他はわかりません。）
以下がそのコードです。初心者が作った初歩レベルの簡単な記述ですので細かく調整する
のも容易だと思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="utf-8">
4<title>
5    test
6</title>
7<style>
8    * {
9        margin: 0;
10        padding: 0;
11    }
12
13    body {
14        width: 100vw;
15        height: 1000px;
16    }
17
18    table {
19        position: relative;
20    }
21
22    thead,
23    tr,
24    th,
25    tbody,
26    td {
27        display: inline-block;
28        font-size: 0;
29        box-sizing: border-box;
30    }
31
32    table {
33        width: 400px;
34        font-size: 0;
35        box-sizing: border-box;
36        display: block;
37    }
38
39    .tr00 {
40        background-color: rgb(2, 233, 110);
41        width: 400px;
42
43    }
44
45    .tr01 {
46        background-color: rgba(226, 241, 20, 0.287);
47        width: 400px;
48
49    }
50
51    .tr02 {
52        background-color: rgba(54, 200, 219, 0.287);
53        width: 400px;
54    }
55
56    th,
57    td {
58        font-size: 24px;
59    }
60
61    th {
62        width: calc(100% / 4);
63    }
64
65    th:not(:first-child) {
66        border-left: 2px solid black;
67    }
68
69    .tr00 {
70        border: 2px solid black;
71    }
72
73    .tr01 {
74        border-left: 2px solid black;
75        border-right: 2px solid black;
76        border-bottom: 2px solid black;
77    }
78
79    .tr02 {
80        border-left: 2px solid black;
81        border-right: 2px solid black;
82        border-bottom: 2px solid black;
83    }
84
85    td {
86        width: calc(100% / 4);
87        text-align: center;
88    }
89
90    td:not(:first-child) {
91        border-left: 2px solid black;
92    }
93
94    thead {
95        position: relative;
96    }
97</style>
98
99<body>
100    <div>
101        <table id="table">
102            <thead id="thead">
103                <tr class="tr00">
104                    <th>E</th>
105                    <th>A</th>
106                    <th>B</th>
107                    <th>C</th>
108                </tr>
109            </thead>
110            <tbody>
111                <tr id="tr" class="tr01">
112                    <td>あいう</td>
113                    <td>あいう</td>
114                    <td>かきく</td>
115                    <td>さしす</td>
116            </tbody>
117            <tbody>
118                <tr class="tr02">
119                    <td>あいう</td>
120                    <td>あいう</td>
121                    <td>かきく</td>
122                    <td>さしす</td>
123                </tr>
124            </tbody>
125        </table>
126    </div>
127    <script>
128        const tableHeight = document.getElementById("table").clientHeight
129        const thead = document.getElementById("thead");
130        window.addEventListener("scroll", function () {
131            if (tableHeight - thead.clientHeight - window.pageYOffset >= 0) {
132                thead.style.top = window.pageYOffset + "px";
133            }
134        })
135    </script>
136</body>
137
138</html>

投稿2020/07/30 10:37

Jon_do

総合スコア1373

jQuery 本体が無いようですが?
stickyfill.min.jsの前に読み込ませてみたらどうでしょう?

対応バージョンが分からないので一応最新のを載せておきます

html
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

投稿2020/07/30 05:25

-millmill-

総合スコア676

kumakumatan

2020/07/30 05:43

ご回答ありがとうございます。ご指定のように読み込ませたのですが、IE11だと固定されないままです。宜しくお願いします。

-millmill-

2020/07/30 07:37

ごめんなさいm(__)m jQueryは必要なかったようですね。。私の方で再現してみたのですが firefoxでも IE11 (ユーザーエージェントなので絶対ではありませんが) <td>あいう</td> が同じように固定されています

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

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

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

IE11でposition: sticky を利用できるようにするには

関連した質問