因为项目需要，最近开始微信开发公众号，接触到了Vue框架。虽然这个效果的实现是基于Vue框架的，但是也可以借鉴。这个道理哪里都一样。进入正题，先来看效果图：其实js做这个效果还是挺简单的，因为在css中我们可以设置position:fixed;一个元素的，这样就可以固定在那里，这样无论页面怎么滚动，它的位置都不受影响，所以我们的想法是在合适的时候把要固定的head元素的position属性设置为fixed.但是什么时候是合适的时间，这个就需要我们去计算，我们需要监听页面的滚动状态，当页面滚动到top元素所在的位置的时候，就是我们设置固定的时候，所以我们需要我们:1.监听页面滚动状态：在mounted回调中添加如下代码：mounted(){//handleScroll为页面滚动监听回调window.addEventListener('scroll',this.handleScroll);},同时在destroyed回调中移除监听：destroyed(){window.removeEventListener('scroll',this.handleScroll);},2.计算天花板元素到页面顶部的距离:计??算出这个距离后，就可以确定固定天花板元素的时机了，如果你的天花板元素上方的元素高度是固定的，那么就简单了，在handleScroll方法中判断一下就可以了，可以跳到第三个直接step，如果是动态的，那么就需要我们在接口中请求数据，在dom元素渲染完成后进行动态计算。Vue中有一个非常好用的方法，可以很方便的监听dom渲染完成：//监听dom渲染完成this.$nextTick(function(){//这里fixedHeaderRoot是天花板元素的IDletheader=document.getElementById("fixedHeaderRoot");//这里我们需要获取到元素顶部的距离和元素本身的高度this.offsetTop=header.offsetTop;this.offsetHeight=header.offsetHeight;console.log("offsetTop:"+this.offsetTop+","+this.offsetHeight);});3.判断页面的滚动距离：handleScroll(){//获取页面的滚动距离letscrollTop=window.pageYOffset||文档.documentElement.scrollTop||文档.body.scrollTop;//判断页面滚动距离是否大于天花板元素的位置this.headerFixed=scrollTop>(this.offsetTop-this.offsetHeight*2);},ps：理论上应该是scrollTop>(this.offsetTop-this.offsetHeight)，但是不知道为什么弄到这里和scrolled到ScrollTop还是小于top元素定位时的this.offsetTop-this.offsetHeight的值，所以这里*2，这样得到的值刚刚好，有知道的请帮忙弄清楚上面的内容。我们得到了一个headerFixed的boolean属性值，那么我们只需要设置position:fixed即可；天花板元素的属性根据其值。我们可以写一个css样式：.isFixed{position:fixed;顶部：px2rem(110)；左：px2rem(20)；right:px2rem(20);}然后Vue可以在dom元素中动态设置class，非常方便：
