给singer的左侧添加fixedTitle,并显示向上滚动偏移效果;
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,并显示向上滚动偏移效果;的更多相关文章
- singer页左侧滚动的时候右侧跟随高亮显示
1.封装scroll.vue的listenScroll属性和方法,用来确定监听listview.vue的滚动事件 2.将listview.vue的listenScroll属性默认设置为true; 3. ...
- dedecms左侧导航栏不显示问题
dedecms左侧导航栏不显示问题 在做织梦项目时,经常会碰到后台左侧导航栏不显示的问题,如下所示: 这主要是由于文件权限不足造成的.有两种方法 第一种:把 /data 文件夹全部改成 777 权 ...
- django 权限设置 左侧菜单点击显示,面包屑
1.左侧菜单点击显示 就是在点击的时候保留点击的功能 方法. 1.加入新的字段,pid来判断 class Permission(models.Model): """ 权限 ...
- 添加QScintilla时显示无法解析的外部函数
转载请注明出处:http://www.cnblogs.com/dachen408/p/7147165.html 问题:添加QScintilla时显示无法解析的外部函数 解决方案:去掉头文件qscisc ...
- [Swift通天遁地]二、表格表单-(17)制作在表单左侧添加单选和复选组件的表单行
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- C++通讯录管理系统(添加联系人,显示联系人,删除联系人,查找联系人,修改联系人,清空联系人,退出通讯录)
1 /** 2 * ProjectNmae:通讯录管理系统 3 * 功能: 4 * 添加联系人:向通讯录添加新人 5 * 显示联系人:显示通讯录中的所有联系人信息 6 * 删除联系人:按照姓名进行删除 ...
- 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
- JS实现类似QQ好友头像hover时显示资料卡的效果
一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果 hover时显示二维码 二.实现 用如下这样一 ...
- iframe的滚动栏问题:显示/隐藏滚动栏
iframe 问题2008-01-22 16:37****** 显示 iframe 内容 XHTML 1.0 Transitional 标准不能显示 <!DOCTYPE html PUBLI ...
随机推荐
- “error: command 'x86_64-linux-gnu-gcc' failed with exit status 1” in virtualenv
Most of the time these are dependency-issues. Following the stack-trace of the gcc compiler one ca ...
- javascript实现掉落弹出层------Day29
顾名思义.所谓"掉落弹出层".就是出现一个弹出层,而出现的位置是从上方向下掉落.掉落到指定的位置停止,这样分析起来.和"右下角弹出提醒对话框"比起来,确有异曲同 ...
- 查询SQL存储过程创建时间
select [name] ,create_date ,modify_date FROM sys.all_objects where type_desc = N'SQL_STORED_PROCE ...
- INNODB自增主键的一些问题 vs mysql获得自增字段下一个值
今天发现 批量插入下,自增主键不连续了....... InnoDB AUTO_INCREMENT Lock Modes This section describes the behavior of A ...
- Python 实现的、带GUI界面的词云生成器
代码地址如下:http://www.demodashi.com/demo/14233.html 详细说明: "词云"就是数据可视化的一种形式,给出一段文本,根据文本中词语的出现频率 ...
- Eclipse折叠代码 coffee bytes code folding
提供一个插件下载地址,博客园的: http://files.cnblogs.com/wucg/com.cb.eclipse.folding_1.0.6.jar.zip 将下载的zip文件解压出来的j ...
- xcode 在哪里新建category、protocol等文件
1.和以前新建新文件一样.2.当然选IOS啦,不过OS X也有这个选项,然后Objctive-C File. 3.在File Type里选就OK啦.
- RHEL7 -- 通过gerp使用正则表达式
正则表达式常会含有shell元字符(如S.*等),建议使用单引号('')来括起行令上的正则表达式 1.行定位符号 行首定位符号^和行尾定位符$ #找出以s开头的行: # grep '^s' /etc/ ...
- DBA_实践指南系列2_Oracle Erp R12系统安装配置设定Setup(案例)
2013-12-02 Created By BaoXinjian
- Python isupper() 方法
描述 Python isupper() 方法检测字符串中所有的字母是否都为大写. 相反的方法:islower() 方法. 语法 isupper() 方法语法: S.isupper() 参数 无. 返回 ...