让粘头在表格元素上工作

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 = '';
    }
}

除非我将它应用到桌子上，否则它会起作用。知道为什么它不起作用吗？

<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 容器成为表内的tr（而不是另一个tr。
• 这应该怎么做？ stickMob = 'stick'; 添加类使用 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/

祝你好运。