安卓端网页浏览过程中实时更新title的web实现
1 $(function () { 2 var scrollTop = 0, //缓存上一次触发scroll的时候的scrollTop值 3 appendIndex = 0, //由于第23行append这个操作需要时间,在这个时间内可能多次触发scroll事件,为了不会append多次,这里缓存一个appendIndex变量,标识是否已经进行append操作 4 removeIndex = 0, //同上,为了第46行不会detach多次 5 firstTitle = $("p.contentTitle").eq(0); 6 if (firstTitle != undefined) { 7 $("#topTitle p.titleNormal").html(firstTitle.html()); 8 } 9 $(window).scroll(function () { 10 var topTitle = $("#topTitle p"), //顶部title 11 topTitleWrap = $("#topTitle"), //顶部title的容器 12 curIndex = parseInt(topTitle.last().attr("data-index")), //顶部title最后的索引值 13 nextTitle = $("p.contentTitle").eq(curIndex + 1), //向上滑动时下一个title 14 prevTitle = $("p.contentTitle").eq(curIndex - 1), //向下滑动时上一个title 15 curTitle = $("p.contentTitle").eq(curIndex), 16 curScrollTop = $("body").scrollTop(); //取得当前scrollTop的值 17 18 if (curScrollTop > scrollTop) {//如果向上滑动 19 if (nextTitle[0] != undefined) { 20 if (nextTitle[0].getBoundingClientRect().top <= 52) {//如果下一个title与顶部的title贴到一起或者超过它 21 var nextTitleIndex = parseInt(nextTitle.attr("data-i")) - 1; //下一个title的索引值 22 var lastTitleIndex = parseInt(topTitle.last().attr("data-index")); //顶部最后一个title的索引值 23 if (nextTitleIndex == lastTitleIndex + 1) { 24 if (appendIndex == lastTitleIndex) { 25 topTitleWrap.html("<p class='titleNormal' data-index=" + nextTitleIndex + ">" + nextTitle.html() + "</p>"); 26 } 27 removeIndex = nextTitleIndex; 28 appendIndex = nextTitleIndex; 29 } 30 } 31 } 32 } 33 else {//如果向下滑动 34 if (prevTitle[0] != undefined && curTitle[0] != undefined) { 35 if (curTitle[0].getBoundingClientRect().top >= 0) { 36 var prevTitleIndex = parseInt(curTitle.attr("data-i")) - 1; 37 var lastTitleIndex = parseInt(topTitle.last().attr("data-index")); 38 if (prevTitleIndex == lastTitleIndex) { 39 if (removeIndex == lastTitleIndex && removeIndex != 0) { 40 topTitleWrap.html("<p class='titleNormal' data-index=" + parseInt(curIndex - 1) + ">" + prevTitle.html() + "</p>"); 41 } 42 if (curTitle.attr("data-i") - 1 > 0) { 43 appendIndex = prevTitleIndex - 1; 44 removeIndex = prevTitleIndex - 1; 45 } 46 } 47 } 48 } 49 } 50 scrollTop = curScrollTop; 51 }); 52 });
View Code
转载于:https://www.cnblogs.com/yayadoudou/p/3492846.html
安卓端网页浏览过程中实时更新title的web实现相关推荐
- android 模拟器声音设置,逍遥安卓模拟器运行游戏过程中没有声音怎么解决
有用户反映,使用逍遥安卓模拟器运行游戏过程中突然没有了声音,重新加载之后还是这样,这是为什么呢?针对这一问题,小编整理了具体的解决方法,大家可以学习保存. 逍遥安卓模拟器运行游戏过程中没有声音怎么解决 ...
- 网页制作过程中隐藏的文件后缀名怎么显现?
1.在win7里面,首先打开"我的电脑"(计算机) 2.然后打开左上角的"组织" 3.接着就出现了一个下拉菜单,点击"文件夹和搜索选项" 4 ...
- 老牛知点所以然-Linux(Ubuntu)配置安卓开发环境及过程中常见问题解决
文章目录 Linux安装JDK,配置JDK环境变量 安装SDK和gradle 安装AndroidStudio AndroidStudio创建模拟器报错 安装FireFox 建立Firefox桌面快捷方 ...
- 制作移动端手机网站过程中的SEO优化方法技巧
据国内三大运营商数据来看,中国的手机用户数已达10亿,超过2/5的移动用户每个月都会从手机终端访问网页,如今的移动端手机网站比例肯定有提升,但是对于这些存在的移动版本网站来说,马海祥查看了很大一部分手 ...
- Unity中实时更新图片的方法探究
背景 最近继续在做VR会议,在共享桌面这一块遇到了一个棘手的问题.在会议中,共享的桌面是通过发送一帧一帧的图片来实现的.在Unity中需要把图片渲染出来. 3个难点 在Unity实时的渲染图片有3个难 ...
- 【Qt】 Qt中实时更新UI程序示例
00. 目录 文章目录 00. 目录 01. 概述 02. 开发环境 03. 实时更新UI(非信号与槽) 04. 实时更新UI(信号与槽) 05. 源码下载 06. 附录 01. 概述 Qt在运行时会 ...
- Web浏览过程中涉及到的协议
当你要访问一个网页时,首先要在浏览器中输入网址,假如我们在xx校园网内,访问http://www.cfca.com.cn/chanpin/chanpin.htm,它的各部分含义如下: http:// ...
- 网页制作过程中怎么配色
我们做网站过程中,网站配色是一个很重要的环节.据我了解基本上有两种方式,一是做图切片式,二是代码控制式,早期网络因为受网速的限制大部分网站使用代码来设计,网站通过CSS控制定位来达到网站展现效果.后来 ...
- 网页设计过程中一般命名规则
2019独角兽企业重金招聘Python工程师标准>>> 由--学无止境--整理 www.nmgzlt.com/blog id的命名: (1)页面结构 容器: container ...
最新文章
- Go 学习笔记(12)— 字典map定义、初始化、读取字典、删除字典、清空字典、map 按 key 进行有序遍历
- node 加密解密模块_NODE.JS加密模块CRYPTO常用方法介绍
- spring javafx_带有Spring的JavaFX 2
- jsp源码oracle数据库,JSP与oracle数据库交互案例
- html怎么设计自己的网页,求一份自己设计的简单网页 HTML格式
- anaconda: command not found
- RF-实现接口自动化
- Nxlog 配置总结
- linux终端哪个好看,关于linux:Linux-终端最全推荐建议收藏
- 【超详细】R语言实现各种数据可视化
- Js逆向教程-05明确js逆向的目标
- Week7 B - TT 的旅行日记
- STM32串口蓝牙实验--蓝牙控制小灯
- jsp+java中小学排课系统
- 惠州电子计算机职业学校,惠州市十大中专学校排名
- 烤仔的朋友们丨Totle 是什么?
- 【实用】Java对象与JSON字符串的互转,实用操作!
- 一位大龄程序员所经历的面试的历炼和思考
- 前端获取明天,后天等的日期和星期几
- 翁恺老师 狐狸和兔子练习