用vue开发顶端粘滞效果的页面

概述

通常一个长的页面，需要滚动浏览，有部分重要信息会随着滚动而看不见，因此需要粘滞在顶端，而又不影响滚动浏览，这个demo基于vue2，实现这个需求。

详细

代码下载：http://www.demodashi.com/demo/12107.html

实现思路

1. 布局设计，如下图所示：

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

代码下载：http://www.demodashi.com/demo/12107.html

注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权