给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 ...
随机推荐
- Discuz的sc 和tc版本有什么区别
Discuz的sc 和tc版本有什么区别 简单的来说: sc 是tc 是繁体中文 简体中文Simplified Chinese 繁体中文traditional Chinese
- JavaScript match()方法使用
1.JavaScript match() 方法说明http://www.w3school.com.cn/jsref/jsref_match.asp 写法: stringObject.match(sea ...
- eclipse to avoid the message, disable the...
标题 CreateTime--2018年5月9日10:38:15 Author:Marydon 1.问题描述 2.问题解析 这是因为eclipse的智能提示超时引起的,将超时间调大即可,如:200 ...
- jQuery 源码学习笔记
//检测 window 中新增的对象 //first var oldMap = {}; for(var i in window) { oldMap[i] = 1; } //second for(var ...
- loadrunner中log的使用初步总结
1.log的设置方式 . 在 runtime setting中可以设置log的生成方式: 默认的log方式: Enable logging选中,log option是Send messages onl ...
- C++开发安卓、windows下搭建Android NDK开发环境
1. NDK(Native Development Kit) 1.1 NDK简介 Android NDK是一套允许开发人员使用本地代码(如C/C++)进行Android APP功能开发的工具,通过这个 ...
- MSSQL-SQL SERVER 2008安装教程
运行setup.exe 选择“安装”菜单,点击“全新安装或向现有安装添加功能. 环境检测通过,点击“确定”: 不用修改产品密钥,点击“下一步”: 点击“下一步”: 根据您的实际情况选择响应的组 ...
- 使用padding代替高度实现背景图片高度按比例自适应
本篇文章由:http://xinpure.com/use-padding-instead-of-highly-adaptive-background-image-height-proportionat ...
- POJ 3691 DNA repair (DP+AC自动机)
DNA repair Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 4815 Accepted: 2237 Descri ...
- Python学习笔记016——面向对象
面向对象是指用类来描述一个对象(实例),用类来建立实例与实例的关联关系 对象 : object 实例 : instance 1 类 1.1 什么是类 类是用来描述对象的工具,用类可以创建一个或 ...