vue+jquery+lodash实现滑动时顶部悬浮固定效果


Posted in jQuery onApril 28, 2018

本文实例为大家分享了vue实现滑动时顶部悬浮固定效果的具体代码,供大家参考,具体内容如下

这个效果是一个项目中抽出来的一个demo效果。

vue+jquery+lodash实现滑动时顶部悬浮固定效果

前期准备:

1. 引入jQ

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

引入lodash.js

npm install lodash -D

fixTop.vue组件的

<template>
 <div class="fixtop2">

  <header class="header" ref="header"></header>

  <div class="nav" ref="nav" :class="{isFixed:isFixed}">
   <div class="box" v-for="(item,index) in list" :key="index">
    {{item.title}}
   </div>
  </div>

  <ul class="content">
   <li v-for="(item,index) in new Array(20)" :key="index">{{index+1}}</li>
  </ul>

 </div>
</template>
<script>
var throttle = require('lodash/throttle'); //从lodash中引入的throttle节流函数
export default {
 name: 'navScroll2',
 data() {
  return {
   list: [
    { title: 'AAAA', id: 1 },
    { title: 'BBBB', id: 2 },
    { title: 'CCCC', id: 3 },
    { title: 'DDDD', id: 4 },
   ],
   isFixed: false, //是否固定的
   throttleScroll: null, //定义一个截流函数的变量
  };
 },
 methods: {
  //滚动的函数
  handleScroll() {
   let h = $(this.$refs.header).outerHeight(); //header的高度
   let wh = $(window).scrollTop(); //滚动的距离的,为什么这里使用的jq,因为不用考虑的什么的兼容问题
   let navH = $(this.$refs.nav).outerHeight(); //nav的高度

   if (wh > h) {
    this.isFixed = true;
   } else {
    this.isFixed = false;
   }
  },
 },

 mounted() {
  //写在掉接口的里面的
  this.$nextTick(() => {
   //这里使用监听的scroll的事件,为什么要使用的节流函数,如果不使用的,页面一直在滚动计算的,这样在
   //使用手机时候,出现非常卡的,隔一段时间计算,大大降低了性能的消耗(具体的好处自己去查资料)
   window.addEventListener('scroll', this.throttleScroll, false);
  });

  this.throttleScroll = throttle(this.handleScroll, 100);
 },
 deactivated() {
  //离开页面需要remove这个监听器,不然还是卡到爆。
  window.removeEventListener('scroll', this.throttleScroll);
 },
};
</script>
<style lang="scss" scoped>
.fixtop2 {
 min-height: 100vh;
}

.header {
 height: 5rem;
 width: 100%;
 background-color: red;
}

.nav {
 display: flex;
 width: 100%;
 background-color: pink;
 &.isFixed {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
 }
 .box {
  font-size: 0.3rem;
  padding: 0 0.3rem;
  height: 0.9rem;
  line-height: 0.9rem;
  color: #333333;
  flex: 1;
 }
}

.content {
 height: 20rem;
 li {
  width: 100%;
  height: 1rem;
  border-bottom: 1px solid #000;
 }
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
纯jQuery实现前端分页功能
Mar 23 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
jQuery实现计算器功能
Oct 19 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 #jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 #jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 #jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 #jQuery
jQuery length 和 size()区别总结
Apr 26 #jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 #jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 #jQuery
You might like
PHP如何得到当前页和上一页的地址?
2006/11/27 PHP
安装APACHE
2007/01/15 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
python读写二进制文件的方法
2015/05/09 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
python线程中的同步问题及解决方法
2019/08/29 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
Python jieba库用法及实例解析
2019/11/04 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
贺卡寄语大全
2014/04/11 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
学校政风行风整改方案
2014/10/25 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers