让粘头在 table 元素上工作

Question

我有内置的粘性元素 Javascript：

  $(document).ready(function () {
    $(window).scroll(stickyRelocate);
});

var stickMob = document.getElementById("sticky-mobile");
var stop = (stickMob.offsetTop - 60);

window.onscroll = function (e) {
    var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
    console.log(scrollTop, left.offsetTop);

    if (scrollTop >= stop) {
        stickMob = 'stick';
    } else {
        stickMob.className = '';
    }
}

除非我将它应用于 table，否则它会起作用。.知道为什么它不起作用吗？

<thead>
     <tr>
          <th><h3>Freebies</h3></th>
          <div id="sticky-mobile">
               <th class="text-centred"><p> Together+ plan</p></th>
               <th class="text-centred"><p> Together plan</p></th>
          </div>
     </tr>
</thead>

JS Fiddle

Answer 1

您的 html 和 javascript 中存在一些错误。

将您的 sticky-mobile 容器设为 table 内的 tr（而不是另一个 tr.
这应该怎么办？ stickMob = 'stick'; 添加 class 使用 jquery addClass 方法或 javascripts className 属性.
这会引发错误 $(window).scroll(stickyRelocate); 因为没有函数 stickyRelocate

经过一些清理后，这段代码是一个好的开始：

<table> 
<thead>
  <tr>
    <th colspan="2"><h3>Freebies</h3></th>
  </tr>
  <tr id="sticky-mobile">
    <th class="text-centred"><p> Together+ plan</p></th>
    <th class="text-centred"><p> Together plan</p></th>
  </tr>
</thead>
</table>

Js:

var stickMob = document.getElementById("sticky-mobile");
var stop = stickMob.offsetTop;

window.onscroll = function (e) {
    var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;


    if (scrollTop >= stop) {
        stickMob.className = 'stick';
    } else {
        stickMob.className = '';
    }
}

这是一个 jsfiddle，您的代码经过了一些清理：https://jsfiddle.net/32zfy7rq/1/

祝你好运。

让粘头在 table 元素上工作

Get sticky head to work on table element

javascript

css

jquery

html-table