Vue开发——实现吸顶效果

因为项目需求,最近开始转到微信公众号开发,接触到了Vue框架,这个效果的实现虽说是基于Vue框架下实现的,但是同样也可以借鉴到其他地方,原理都是一样的。

进入正题,先看下效果图:

其实js做这个效果还是挺简单的,因为在css中我们可以设置一个元素的position: fixed;,这样它就可以固定在那里,这样不管页面怎么滚动,它的位置都不受影响,所以我们的思路就是在合适的时机把要吸顶的头部元素的position属性设置为fixed就可以了。但是这个合适的时机是什么时候呢,这就需要我们计算了,我们需要监听页面的滚动状态,当页面滚动到要吸顶元素所处的位置的时候就是我们设置它固定的时候,所以就需要我们:

1.监听页面的滚动状态:

在mounted回调中加入以下代码:

mounted() {
  // handleScroll为页面滚动的监听回调
  window.addEventListener(‘scroll‘, this.handleScroll);
 },

同时在destroyed回调中移除监听:

destroyed(){
  window.removeEventListener(‘scroll‘, this.handleScroll);
},

2.计算吸顶元素到页面顶部的距离:

计算出来这个距离之后就可以确定固定吸顶元素的时机了,如果你的吸顶元素上面的元素的高度是固定的话,那就简单了,直接在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);
});

3.判断页面滚动距离:

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>

其实到这里这个效果已经实现完成了,不过我在测试过程中发现,因为ios手机页面滚动到底部的时候,还可以上拉,有一个橡皮筋效果,这个效果会导致一个我们页面的一个Bug,因为它的这种橡皮筋效果也会触发页面滚动的监听,当数据很多的时候其实看不出来,只有当数据刚好占满屏幕的时候,这个时候你再继续往上滑动屏幕,就会触发页面的滚动监听,这个时候handleScroll方法中计算出来的值scrollTop是大于吸顶元素top的距离,所以吸顶元素会被设置为固定属性,大家知道一个元素一旦被设置为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>

这个元素默认是隐藏的,只有当页面滚动的距离达到了它的位置的时候我们才让它显示,由于它是固定状态,所以它的隐藏显示并不会对页面产生影响,这样下面的内容就不会往上顶了,就可以解决ios手机上拉页面橡皮筋效果的Bug了,当然这种方式有些取巧,但是暂时没有更好的解决方案了,如果大家有更好的解决方案,欢迎在下面评论。最后给大家看一下我的页面布局:

<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>

参考

喜欢的麻烦动动小手点个赞来支持我,有不对的地方欢迎大家指正,有什么问题也可以在下方留言,我看到后会第一时间回复!谢谢您来看这篇文章!??????

原文地址:https://www.cnblogs.com/xbincoder/p/11289120.html

时间: 2024-10-28 09:16:20

Vue开发——实现吸顶效果的相关文章

基于scroll的吸顶效果

本次要实现的是一种常见的网页效果,如下: 页面由头部,导航,主体内容三部分组成,当页面发生滚动时,头部逐渐隐藏,导航部分向上移动,直到导航部分距离浏览器顶部为零时,导航部分固定不动,保持吸顶效果,如下所示: 我们分三步实现上面的效果. 首先是页面的基础结构,为了简化操作,将头部.导航部分和主体内容部分全部用图片表示. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

better-scroll之吸顶效果巨坑挣扎中

今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持PC) 关于其中的API大家可以去官网看下  这里就给大家介绍几种常用的以及需要注意的点是什么 首先说一下better-scroll的使用注意问题吧 1.移动端 我们通常采用三段式进行布局的  例如 <div class="container">    <header></header><main></main><fotter&g

代码:jquery 吸顶 效果

(只是个简单吸顶效果,还需完善) 吸顶: <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(window).scroll( function() { var m =$(document).scrollTop(); console.log(

吸顶效果插件

function Topfixed(options){ var opts = $.extend({ id:'#topFixed', fixedClass:'top-fixed' },options); var fixed = $(opts.id);//获取吸顶目标ID对象 var marginBottom = parseInt(fixed.css('marginBottom')) || 0;//吸顶目标的下边距 //var blank = document.createElement('div'

5行js代码搞定导航吸顶效果

一.HTML布局 首先写HTML布局 <body> <div id="wrap"></div> </body> 二.CSS样式 给点简单的样式 <style> *{ margin: 0; padding: 0; } body{ height: 2000px; background-image: linear-gradient(-180deg, #15f09d 0%, #25A0FF 50%, #fca72b 100%); }

JQ实现吸顶效果代码

吸顶下过代码跟简单几行代码就可以了 如果滚动的军力大于100,就改变导航的定位方式,否则就默认 $(function(){ $(window).scroll(function(){ if($(window).scrollTop()>100){ $(".nav").css({"position":"fixed","top":0,"background":"red","wid

纯CSS实现吸顶效果

position的属性有哪些? {  position: static;  position: relative;  position: absolute;  position: fixed; position: inherit;  position: initial;  position: unset; } 还有一个position的属性值:position: sticky: position: sticky:粘性定位,是相对定位和固定定位的混合.元素在跨越特定阈值前为相对定位,之后为固定定位

支付宝小程序滚动监听吸顶效果

axml部分 <view class=" {{menuFixed ? 'fixed': ''}}" id="affix">菜单栏</view> axss部分 .fixed{position: fixed; top: 0; } js部分 Page({ data: { menuFixed:"", }, // 监听页面滚动距离scrollTop onPageScroll: function(e) { var that = thi

移动端吸顶(iOS与安卓)

有的时候经常会遇到移动端吸顶效果,开始我也只是上网查了一下,分别有iOS和android两种样式,如下: /*!*Android*!*/ .head { position: fixed; top: 0; left: 0; z-index: 5; } /*!*iOS*!*/ .head{ position: -webkit-sticky; position: sticky; top: 0; left: 0; z-index: 5; } 设置之后你会发现只有ios手机的吸顶效果OK了,android