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/

祝你好运。

得到粘性的头来处理表元素

1 个答案: