概述
通常一个长的页面,需要滚动浏览,有部分重要信息会随着滚动而看不见,因此需要粘滞在顶端,而又不影响滚动浏览,这个demo基于vue2,实现这个需求。
详细
实现思路
-
布局设计,如下图所示:
2.页面向下滚动,A区越来越小,B慢慢往上升,如下图所示:
3.当A刚好消失,B正要开始消失的时候,通过改变B的css,把它”抽“出来,悬浮在顶端。由于B离开了文档流,因此C会往上”流动“,和A拼接上,因此,如果不做处理,会看到C跳跃一下,体验不好。因此,在这个”抽“出B的同时,补上一个同样高度的文档,这样就不会有跳跃了。
4.反方向滚动,道理也是类似的,在A区即将出现的时候,把悬浮固定的B“放”回文档流中,并把上一步中补位的文档去掉,这样,整个过程看起来就很舒服了,没有跳动。
5.关键编码
*布局编码:给B区设置一个动态属性:class="auto_fixed",后面可以通过auto_fixed变量去控制B区的css。
<div class="main"> <!-- A区 --> <div class="header"> <div>头部内容,需要先展示的。</div> ………………………………………… ………………………………………… <div>头部内容,需要先展示的。</div> </div> <!-- B区代码 --> <div class="auto_fixed" :class="auto_fixed">自动粘滞固定头部,需要一直展示的</div> <!-- 补位的div,在B区“跳”出文档流之后出现。 --> <div class="auto_fixed_fake" :style="{display: auto_fixed.fixed ? 'block':'none'}"></div> <!-- C 区 --> <div class="content"> <div> 如果你无法简洁的表达你的想法,那只说明你还不够了解它。 -- 阿尔伯特·爱因斯坦 </div> ……………………………………………………………… ……………………………………………………………… </div> </div>
* 监听页面滚动:由于vue的机制,需要在mounted方法之后的$vm.$nextTick()里去监听滚动。
this.$nextTick(function () { window.addEventListener('scroll', this.onScroll) })
* 编写onScroll方法,判断滚动的距离,和A区的高度,当滚动距离大于等于A区高度的时候,
马上通过改变B区的css,让它浮起来黏贴到顶端。
onScroll(){ // 计算滚动的距离 let scrolled = document.documentElement.scrollTop || document.body.scrollTop // 计算A区的高度 let header_height = null if(document.getElementsByClassName('header')[0]){ header_height = document.getElementsByClassName('header')[0].offsetHeight } console.log('滚动的距离:'+scrolled,'头部的高度:'+ header_height) // 当滚动的距离等于A区的高度的时候,即是临界点,马上通过auto_fixed变量,给B区添加一个 // class,让B区浮起来 this.auto_fixed = { auto_fixed: true, fixed: scrolled >= header_height } } //定义好class的css .auto_fixed{ height: 3em; background: orange; line-height: 3em; text-align: center; } .fixed{ position: fixed; top: 0px; 100%; }
目录文件结构
演示效果
Gif链接:http://wx4.sinaimg.cn/large/8f8f5f45gy1fm93iiufuig20ia0vwx6s.gif