js如何监听sticky元素的位置变化？

Question

元素用sticky定位 top为0

现在希望监听元素是否置顶

我的思路是监听元素的位置 如果top是0就说明置顶了

貌似没有监听元素位置变化的事件

如何处理 谢谢

Answer 1

google开发者提供了一个监测sticky位置的解决方案:需要翻墙

但是我用了一个土办法就是用以下的滚动事件函数

let tags = document.getElementsByClassName('tag');
                let i = 0;
                while (tags[i] && tags[i].getBoundingClientRect().y <= 30) {
                    i++;
                }
                this.selectedIndex = i;

页面滚动时，遍历所有sticky元素 如果相对屏幕的高度小于30px（这里被sticky的元素高度为固定30px） 则说明是当前置顶的元素

补充：
借鉴google的方法，使用intersectionOberver实现如下：

 addListeners() {
                let observer = new IntersectionObserver(this.updateTag);
                let tags = document.getElementsByClassName('tag');
                Array.prototype.map.call(tags,item=>observer.observe(item));
                observer.observe(document.getElementById('ins-box'));
            },
            updateTag(entries){
                entries.map((item)=>{
                    if (item.intersectionRatio>0){//新元素进入页面时候
                        let target = item.target;
                        if (target.tagName=='DIV'){
                            this.$set(this.tagVisible,0,true)
                        }else{
                            let i = Number(target.id.substr(3))+1;
                            this.$set(this.tagVisible,i,true)
                        }
                    }else{ //元素离开页面时候
                        let target = item.target;
                        if (target.tagName=='DIV'){
                            this.$set(this.tagVisible,0,false)
                        }else{
                            let i = Number(target.id.substr(3))+1;
                            this.$set(this.tagVisible,i,false)
                        }
                    }
                });
            },

Answer 2

可以在滚动事件中监听元素的offsetTop

Answer 3

监听的话可以了解下MutationObserver ，但是兼容性不太好，最低ie11。

向下兼容的话，定时器是一种解决方法，但是性能影响太大，所以一般都是考虑哪些因素会改变该元素的位置，然后进行监听。