安卓端网页浏览过程中实时更新title的web实现
- $(function () {
- var scrollTop = 0, //缓存上一次触发scroll的时候的scrollTop值
- appendIndex = 0, //由于第23行append这个操作需要时间,在这个时间内可能多次触发scroll事件,为了不会append多次,这里缓存一个appendIndex变量,标识是否已经进行append操作
- removeIndex = 0, //同上,为了第46行不会detach多次
- firstTitle = $("p.contentTitle").eq(0);
- if (firstTitle != undefined) {
- $("#topTitle p.titleNormal").html(firstTitle.html());
- }
- $(window).scroll(function () {
- var topTitle = $("#topTitle p"), //顶部title
- topTitleWrap = $("#topTitle"), //顶部title的容器
- curIndex = parseInt(topTitle.last().attr("data-index")), //顶部title最后的索引值
- nextTitle = $("p.contentTitle").eq(curIndex + 1), //向上滑动时下一个title
- prevTitle = $("p.contentTitle").eq(curIndex - 1), //向下滑动时上一个title
- curTitle = $("p.contentTitle").eq(curIndex),
- curScrollTop = $("body").scrollTop(); //取得当前scrollTop的值
- if (curScrollTop > scrollTop) {//如果向上滑动
- if (nextTitle[0] != undefined) {
- if (nextTitle[0].getBoundingClientRect().top <= 52) {//如果下一个title与顶部的title贴到一起或者超过它
- var nextTitleIndex = parseInt(nextTitle.attr("data-i")) - 1; //下一个title的索引值
- var lastTitleIndex = parseInt(topTitle.last().attr("data-index")); //顶部最后一个title的索引值
- if (nextTitleIndex == lastTitleIndex + 1) {
- if (appendIndex == lastTitleIndex) {
- topTitleWrap.html("<p class='titleNormal' data-index=" + nextTitleIndex + ">" + nextTitle.html() + "</p>");
- }
- removeIndex = nextTitleIndex;
- appendIndex = nextTitleIndex;
- }
- }
- }
- }
- else {//如果向下滑动
- if (prevTitle[0] != undefined && curTitle[0] != undefined) {
- if (curTitle[0].getBoundingClientRect().top >= 0) {
- var prevTitleIndex = parseInt(curTitle.attr("data-i")) - 1;
- var lastTitleIndex = parseInt(topTitle.last().attr("data-index"));
- if (prevTitleIndex == lastTitleIndex) {
- if (removeIndex == lastTitleIndex && removeIndex != 0) {
- topTitleWrap.html("<p class='titleNormal' data-index=" + parseInt(curIndex - 1) + ">" + prevTitle.html() + "</p>");
- }
- if (curTitle.attr("data-i") - 1 > 0) {
- appendIndex = prevTitleIndex - 1;
- removeIndex = prevTitleIndex - 1;
- }
- }
- }
- }
- }
- scrollTop = curScrollTop;
- });
- });
安卓端网页浏览过程中实时更新title的web实现的更多相关文章
- 驰骋工作流引擎-CCMobile与安卓、IOS集成过程中的问题与解决方案
CCMobile与安卓.IOS集成过程中的问题与解决方案 前言: CCMobile(2019版本)是CCFlow&JFlow 的一款移动端审批的产品.系统基于mui框架开发,是一款可以兼容An ...
- 制作移动端手机网站过程中的SEO优化方法技巧
据国内三大运营商数据来看,中国的手机用户数已达10亿,超过2/5的移动用户每个月都会从手机终端访问网页,如今的移动端手机网站比例肯定有提升,但是对于这些存在的移动版本网站来说,马海祥查看了很大一部分手 ...
- 【C#】让DataGridView输入中实时更新数据源中的计算列
本文适用Winform开发,且DataGridView的数据源为DataTable/DataView的情况. 理解前提:熟知DataTable.DataView 求:更好方案 考虑这样一个场景: 某D ...
- 网页制作过程中div定位的三个问题
这几天要做单位的网站,对于做网站我也不怎么样,于是我便在网上参考了一个比较满意的网站,套一下来把这个工作结束了.在此期间遇到了三个关于div定位问题, 一般网站用div布局时都是从上到下分head . ...
- MFC For循环中实时更新显示Edit内容
在for(){}循环中如果有处理函数,然后需要显示的时候,简单的UpdateData(false);是不行的: for (int i=0;i<10000;i++) { m_nT1.Format( ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- Python爬虫(图片)编写过程中遇到的问题
最近我突然对网络爬虫开窍了,真正做起来的时候发现并不算太难,都怪我以前有点懒,不过近两年编写了一些程序,手感积累了一些肯定也是因素,总之,还是惭愧了.好了,说正题,我把这两天做爬虫的过程中遇到的问题总 ...
- Java SpringMVC实现PC端网页微信扫码支付完整版
一:前期微信支付扫盲知识 前提条件是已经有申请了微信支付功能的公众号,然后我们需要得到公众号APPID和微信商户号,这个分别在微信公众号和微信支付商家平台上面可以发现.其实在你申请成功支付功能之后,微 ...
随机推荐
- android下giflib
源码路径: android/external/giflib 用到的该lib的APP: ./external/chromium_org/android_webview/build/aosp_manife ...
- Linux系统开机默认开启无线网卡
Linux系统每次重新启动时,不会重新打开无线网卡,需要每次手动去更改. 这里通过两种方式开启无线网卡. 第一种方式就是手动连接到Linux系统,(前提是按照了Linux桌面) 1.找到文件夹为 et ...
- Android OutOfMemoryError的理解
最近写了个测试demo调试网络优化,发现下载20M的文件时我直接申请了20M的空间,然后就OOM导致crash了~~ 典型的错误信息如下: OutOfMemoryError:Out of memory ...
- python学习笔记-进程线程
1.什么是进程(process)? 程序并不能单独运行,只有将程序装载到内存中,系统为它分配资源才能运行,而这种执行的程序就称之为进程.程序和进程的区别就在于:程序是指令的集合,它是进程运行的静态描述 ...
- Linux下Keepalived+LVS-DR模式配置高可用负载均衡集群
一.环境说明: 操作系统:Centos-6.5_x86_64 keepalived软件安装在node2和node3机器上. 实际安装之前,先关闭keepalived节点(node ...
- 【转载】关于treeview的多层显示的科学用法!
http://blogs.msdn.com/b/mikehillberg/archive/2009/10/30/treeview-and-hierarchicaldatatemplate-step-b ...
- Drools 规则学习
Drools 规则学习 在 Drools 当中,一个标准的规则文件就是一个以“.drl”结尾的文本文件,由于它是一个标准的文本文件,所以可以通过一些记事本工具对其进行打开.查看和编辑.规则是放在规则文 ...
- 【iOS 使用github上传代码】详解
[iOS 使用github上传代码]详解 一.github创建新工程 二.直接添加文件 三.通过https 和 SSH 操作两种方式上传工程 3.1https 和 SSH 的区别: 3.1.1.前者可 ...
- c#教程之通过数据绑定修改数据
通过数据绑定修改数据 "实体框架"提供了与数据库的双向通信通道.前面已经讲述了如何使用"实体框架"获 取数据,现在来看看如何修改获取的信息,并将改动发送回数据库 ...
- Android 中 LayoutInflater 的使用
一.LayoutInflater 的作用 我们一般使用 LayoutInflater 做一件事:View inflate(int resource, ViewGroup root); inflate( ...