标签：开始 就是 bsp detail point 原理 完成 lan 第一时间
因为项目需求，最近开始转到微信公众号开发，接触到了Vue框架，这个效果的实现虽说是基于Vue框架下实现的，但是同样也可以借鉴到其他地方，原理都是一样的。
其实js做这个效果还是挺简单的，因为在css中我们可以设置一个元素的
position: fixed;，这样它就可以固定在那里，这样不管页面怎么滚动，它的位置都不受影响，所以我们的思路就是在合适的时机把要吸顶的头部元素的position属性设置为fixed就可以了。但是这个合适的时机是什么时候呢，这就需要我们计算了，我们需要监听页面的滚动状态，当页面滚动到要吸顶元素所处的位置的时候就是我们设置它固定的时候，所以就需要我们：
在mounted回调中加入以下代码：
mounted() { // handleScroll为页面滚动的监听回调 window.addEventListener(‘scroll‘, this.handleScroll); },
同时在destroyed回调中移除监听：
destroyed(){ window.removeEventListener(‘scroll‘, this.handleScroll); },
计算出来这个距离之后就可以确定固定吸顶元素的时机了，如果你的吸顶元素上面的元素的高度是固定的话，那就简单了，直接在handleScroll方法中进行判断就可以了，可以直接跳到第三步了，如果是动态的，那就需要我们在接口请求完数据，dom元素渲染完之后进行动态计算了，Vue中有一个很好用的方法，可以很方便的监听dom渲染完成：
// 监听dom渲染完成 this.$nextTick(function(){ // 这里fixedHeaderRoot是吸顶元素的ID let header = document.getElementById("fixedHeaderRoot"); // 这里要得到top的距离和元素自身的高度 this.offsetTop = header.offsetTop; this.offsetHeight = header.offsetHeight; console.log("offsetTop:" + this.offsetTop + "," + this.offsetHeight); });
handleScroll(){ // 得到页面滚动的距离 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; // 判断页面滚动的距离是否大于吸顶元素的位置 this.headerFixed = scrollTop > (this.offsetTop - this.offsetHeight * 2); },
ps:这里理论上其实应该是scrollTop > (this.offsetTop - this.offsetHeight)，但是不知道为啥我这里做出来后滚动到吸顶元素位置的时候scrollTop还是比this.offsetTop - this.offsetHeight的值小，所以这里*2，这样得出来的值才刚刚好，如果有知道的朋友可以帮忙解惑一下。
上面我们得到了一个headerFixed的boolean属性值，接下来我们只需要根据它的值来设置吸顶元素的position: fixed;属性就可以了。 我们可以写一个css样式：
.isFixed{ position: fixed; top: px2rem(110); left: px2rem(20); right: px2rem(20); }
然后Vue可以在dom元素里这样动态设置class，非常方便：
<div id="fixedHeaderRoot"> <div id="knowPointHeader" class="knowPointHeader" :class="headerFixed?‘isFixed‘:‘‘"> <div><span>知识模块</span></div> <div><span>知识点</span></div> <div><span>能力要求</span></div> </div> </div>
position: fixed;，那么它就会相对于浏览器窗口进行定位，这样我们下面的内容就会往上顶，这样的话scrollTop的值又小于了吸顶元素top的距离，这样headerFixed属性又为false，position: fixed;属性又没有了，这样它就又相对与它原本的父元素进行定位，这样就成了一个循环，你会发现页面会上下跳到，这样是肯定不行的，所以我下面又针对这个问题进行了一个优化，当然这个方案感觉不是特别完美，不过确实可以解决这个问题。position: fixed;属性，使得下面的内容往上顶，所以要想解决这个问题，那我们就不固定这个元素，但是这样的话就达不到吸顶的效果了，所以我们需要再加一个和吸顶元素一模一样的元素，它一直就是固定状态：<div id="fixedHeaderRootReal"> <div class="knowPointHeader isFixed" v-show="headerFixed"> <div><span>知识模块</span></div> <div><span>知识点</span></div> <div><span>能力要求</span></div> </div> </div>
<div v-show="kpointListShow" class="knowPointList"> <div id="fixedHeaderRoot"> <div id="knowPointHeader" class="knowPointHeader"> <div><span>知识模块</span></div> <div><span>知识点</span></div> <div><span>能力要求</span></div> </div> </div> <div id="fixedHeaderRootReal"> <div class="knowPointHeader isFixed" v-show="headerFixed"> <div><span>知识模块</span></div> <div><span>知识点</span></div> <div><span>能力要求</span></div> </div> </div> <div class="knowPointItem" v-for="(kpointItem,index) in rows.kpointList" :key="index"> <div><span>{{kpointItem.knowModule}}</span></div> <div><span>{{kpointItem.knowPoint}}</span></div> <div><span>{{kpointItem.abilityRequire}}</span></div> </div> </div>
标签：开始 就是 bsp detail point 原理 完成 lan 第一时间
原文地址：https://www.cnblogs.com/xbincoder/p/11289120.html
