动态获取页面内控件距浏览器顶部的距离

Question

如图，其实就是想实现固定表头。

我的思路是动态监听table到浏览器顶部的距离，如果距离等于零，就把表头绝对定位在顶部就行了。

可是用什么方法动态监听table到浏览器顶部的距离呢？

或者有其他好的实现方式么？

Answer 1

handleScroll () {
      // let top = document.querySelector('.editor-warpper')[0].offsetTop
      let top = Offset(document.getElementById('scrolling-container')).top
      let scrolltop = document.body.scrollTop | document.documentElement.scrollTop
      // console.log(top, scrolltop)
      const toolbar = document.querySelector('.ql-toolbar')
      if (scrolltop > top) {
        addClass(toolbar, 'fixedtop')
      } else {
        removeClass(toolbar, 'fixedtop')
      }
    }

Answer 2

https://developer.mozilla.org...
没梯子的话
// rect is a DOMRect object with eight properties: left, top, right, bottom, x, y, width, height
var rect = obj.getBoundingClientRect();

Answer 3

回答你标题的问题：
距离可视区顶部的高度+滚动条的滚动高度=距离文档顶部高度
给你个参考

Answer 4

elementui有固定表头的啊 不用这么麻烦自己写把