1.将写好的dom绝对定位到顶部;

2.dom值为singerlist的currentIndex.title(通过计算属性获取),如果有则显示fixedTitle,没有则隐藏;

3.计算diff:当diff小于30,大于0的时候滚动,滚动的距离就是diff-顶部高度即TITLE_HEIGHT;

4.diff就等于this.diff = height2 + newY;上线减去滚动的距离,得到的也就是上线到顶部的高度;

5.监听diff的变化,在满足条件时候fixedTitle发生偏移

代码如下:

   <!--fixedTitle-->
<div class="list-fixed" ref="fixed" v-show="fixedTitle">
<div class="fixed-title">{{fixedTitle}}</div>
</div> for(let i=0 ; i<listHeight.length -1; i++){//循环看落在哪一个区间
let height1 = listHeight[i]
let height2 = listHeight[i+1]
if(!height2 || (-newY >= height1 && -newY <height2)){
this.currentIndex =i
// fixedTitle代码
this.diff = height2 + newY;//上线与滚动的值,因为newY是负值,相当于减去:然后监视diff的变化
return
} } diff(newVal){//监听diff
let fixedTop = (newVal>0 && newVal < TITLE_HEIGHT) ? newVal -TITLE_HEIGHT :0
if(this.fixedTop === fixedTop){
return
}
this.fixedTop = fixedTop
this.$refs.fixed.style.transform = `translate3d(0,${fixedTop}px,0)`
}

给singer的左侧添加fixedTitle,并显示向上滚动偏移效果;的更多相关文章

  1. singer页左侧滚动的时候右侧跟随高亮显示

    1.封装scroll.vue的listenScroll属性和方法,用来确定监听listview.vue的滚动事件 2.将listview.vue的listenScroll属性默认设置为true; 3. ...

  2. dedecms左侧导航栏不显示问题

    dedecms左侧导航栏不显示问题 在做织梦项目时,经常会碰到后台左侧导航栏不显示的问题,如下所示: ​ 这主要是由于文件权限不足造成的.有两种方法 第一种:把 /data 文件夹全部改成 777 权 ...

  3. django 权限设置 左侧菜单点击显示,面包屑

    1.左侧菜单点击显示 就是在点击的时候保留点击的功能 方法. 1.加入新的字段,pid来判断 class Permission(models.Model): """ 权限 ...

  4. 添加QScintilla时显示无法解析的外部函数

    转载请注明出处:http://www.cnblogs.com/dachen408/p/7147165.html 问题:添加QScintilla时显示无法解析的外部函数 解决方案:去掉头文件qscisc ...

  5. [Swift通天遁地]二、表格表单-(17)制作在表单左侧添加单选和复选组件的表单行

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  6. C++通讯录管理系统(添加联系人,显示联系人,删除联系人,查找联系人,修改联系人,清空联系人,退出通讯录)

    1 /** 2 * ProjectNmae:通讯录管理系统 3 * 功能: 4 * 添加联系人:向通讯录添加新人 5 * 显示联系人:显示通讯录中的所有联系人信息 6 * 删除联系人:按照姓名进行删除 ...

  7. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  8. JS实现类似QQ好友头像hover时显示资料卡的效果

    一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果 hover时显示二维码 二.实现 用如下这样一 ...

  9. iframe的滚动栏问题:显示/隐藏滚动栏

    iframe 问题2008-01-22 16:37******   显示 iframe 内容 XHTML 1.0 Transitional 标准不能显示 <!DOCTYPE html PUBLI ...

随机推荐

  1. navicat 使用

    sql是操作数据库中数据的语句,在不同的数据库中会略有不同,如mysql,postgreSQL,oracle,sqlserver,sqlite等等,但是sql的基础select.insert.upda ...

  2. angular.foEach

    1.针对对象循环(key,value) 官方示例: var values = {name: 'misko', gender: 'male'}; var log = []; angular.forEac ...

  3. 〖Linux〗使用Qt5.2.0开发Android的NDK应用程序

    2013年12月11日,Qt发布了其新的Qt版本:Qt5.2.0: 利用这个新的版本,我们可以很轻松地制作出Android手机的NDK应用程序. 开发环境:Ubuntu13.10 x86_64 下载链 ...

  4. 〖Android〗酷派手机固件.cpb文件的分解程序

    /* * ===================================================================================== * * Filen ...

  5. bss段,代码段及数据段,堆栈段的区别

    bss段,代码段及数据段,堆栈段的区别 时间:2012-11-21 10:0772人阅读 BSS段:BSS段(bss segment)通常是指用来存放程序中未初始化的全局变量的一块内存区域.BSS是英 ...

  6. 【转载】MyEclipse使用指南(精简版)

    1.安装 2.注册 3.配置 window ----> preferences (1)配置 JDK java--->Installed JREs --> Add ---> JR ...

  7. iOS中的#import和class区别

    在ios中我们经常会在.h和.m中引入一些类啊等等一般用的是#import来进行声明,你们可能也见到在.h文件进用@class来声明的,那么#import和@class进行声明 到底有什么的区别呢?下 ...

  8. bootstrap table 插件 搜索

    以前用过easyui datagrid 每次搜索的时候调用datagrid构造方法 重新获取数据, 发现bootstrap-table 插件不行,只需要初始化一次, 以后每次搜索时,直接调用refre ...

  9. Python学习笔记015——文件file的常规操作之三(标准输入输出文件)

    1 标准输入输出文件 在Python中,模块sys中含有标准的输入输出文件 sys.stdin     标准输入方法(一般是键盘) sys.stdout   标准输出方法(到显示器的缓冲输出) sys ...

  10. fcntl 函数与文件锁

    一.fcntl函数 功能:操纵文件描述符,改变已打开的文件的属性 int fcntl(int fd, int cmd, ... /* arg */ ); cmd的取值可以如下: 复制文件描述符 F_D ...