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. 解决 windows10 system service exception蓝屏

    解决方法: WINDOWS/system32/config/RegBack/SYSTEM/* 复制到 WINDOWS/system32/config/*下

  2. 〖Linux〗Ubuntu13.10,配置tftp服务器

    前言,配置了好久没有发现老是出问题tftp: server error: (2) Access violation,一般侦测之后... 1. 安装软件包:apt-getsudo apt-get ins ...

  3. 批处理文件:将目录下所有的jar文件都加到CLASSPATH

    简便写法如下: 代码 : @echo off SetLocal EnableDelayedExpansion FOR %%i IN ("XXX\lib\*.jar") DO SET ...

  4. java Socket 获取本地主机ip

    package cn.itcast.net.p1.ip; import java.net.InetAddress;import java.net.UnknownHostException; publi ...

  5. Web服务器(容器)请求常见的错误及其解决方法

    首先我们来看看容器如何找到service()方法?(1)当在浏览器中输入 http://localhost:8080/firstweb/sayHi 这个地址后,容器是如何找到 HelloServlet ...

  6. 原创:微信小程序+WEB使用JS实现注册【60s】倒计时功能

    1.效果图: 2.页面仅仅利用了JS的相关功能,包含:wxml.js.wxss 2.1wxml页面代码: <text>绑定手机</text> <form bindsubm ...

  7. 搭建前端vue环境,安装vue-cli遇到Please try running this command again as root/Administrator的解决方案

    最近在搭前端环境,装完node.js之后,准备安装vue工程的初始化工具时(npm install -g vue-cli),遇到这个坑: 大体的意思就是权限问题,导致/usr/local/lib/no ...

  8. nyoj----522 Interval (简单树状数组)

    Interval 时间限制:2000 ms  |  内存限制:65535 KB 难度:4   描述 There are n(1 <= n <= 100000) intervals [ai, ...

  9. Linux下发布javaWeb项目,配置环境变量,tomcat,和安装mysql数据库

    如果不懂,可以联系微博本人:QQ:3111901846 (原创) 1.配置java中jdk 注意一切操作,都是在root这个目录下进行的,不要选择其他目录,不然会出现一些小问题的 第一步: 你需要一个 ...

  10. tomcat6的编译和导入myeclipse

    声明:近期在学习tomcat6的源代码,网上搜索了些相关的资料,并自己操作了下进行了对应的汇总.如今总结例如以下 本文目的:编译tomcat6源代码+导入tomcat6源代码到myeclipse 測试 ...