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. });

安卓端网页浏览过程中实时更新title的web实现的更多相关文章

  1. 驰骋工作流引擎-CCMobile与安卓、IOS集成过程中的问题与解决方案

    CCMobile与安卓.IOS集成过程中的问题与解决方案 前言: CCMobile(2019版本)是CCFlow&JFlow 的一款移动端审批的产品.系统基于mui框架开发,是一款可以兼容An ...

  2. 制作移动端手机网站过程中的SEO优化方法技巧

    据国内三大运营商数据来看,中国的手机用户数已达10亿,超过2/5的移动用户每个月都会从手机终端访问网页,如今的移动端手机网站比例肯定有提升,但是对于这些存在的移动版本网站来说,马海祥查看了很大一部分手 ...

  3. 【C#】让DataGridView输入中实时更新数据源中的计算列

    本文适用Winform开发,且DataGridView的数据源为DataTable/DataView的情况. 理解前提:熟知DataTable.DataView 求:更好方案 考虑这样一个场景: 某D ...

  4. 网页制作过程中div定位的三个问题

    这几天要做单位的网站,对于做网站我也不怎么样,于是我便在网上参考了一个比较满意的网站,套一下来把这个工作结束了.在此期间遇到了三个关于div定位问题, 一般网站用div布局时都是从上到下分head . ...

  5. MFC For循环中实时更新显示Edit内容

    在for(){}循环中如果有处理函数,然后需要显示的时候,简单的UpdateData(false);是不行的: for (int i=0;i<10000;i++) { m_nT1.Format( ...

  6. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  7. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  8. Python爬虫(图片)编写过程中遇到的问题

    最近我突然对网络爬虫开窍了,真正做起来的时候发现并不算太难,都怪我以前有点懒,不过近两年编写了一些程序,手感积累了一些肯定也是因素,总之,还是惭愧了.好了,说正题,我把这两天做爬虫的过程中遇到的问题总 ...

  9. Java SpringMVC实现PC端网页微信扫码支付完整版

    一:前期微信支付扫盲知识 前提条件是已经有申请了微信支付功能的公众号,然后我们需要得到公众号APPID和微信商户号,这个分别在微信公众号和微信支付商家平台上面可以发现.其实在你申请成功支付功能之后,微 ...

随机推荐

  1. android下giflib

    源码路径: android/external/giflib 用到的该lib的APP: ./external/chromium_org/android_webview/build/aosp_manife ...

  2. Linux系统开机默认开启无线网卡

    Linux系统每次重新启动时,不会重新打开无线网卡,需要每次手动去更改. 这里通过两种方式开启无线网卡. 第一种方式就是手动连接到Linux系统,(前提是按照了Linux桌面) 1.找到文件夹为 et ...

  3. Android OutOfMemoryError的理解

    最近写了个测试demo调试网络优化,发现下载20M的文件时我直接申请了20M的空间,然后就OOM导致crash了~~ 典型的错误信息如下: OutOfMemoryError:Out of memory ...

  4. python学习笔记-进程线程

    1.什么是进程(process)? 程序并不能单独运行,只有将程序装载到内存中,系统为它分配资源才能运行,而这种执行的程序就称之为进程.程序和进程的区别就在于:程序是指令的集合,它是进程运行的静态描述 ...

  5. Linux下Keepalived+LVS-DR模式配置高可用负载均衡集群

    一.环境说明:     操作系统:Centos-6.5_x86_64    keepalived软件安装在node2和node3机器上.     实际安装之前,先关闭keepalived节点(node ...

  6. 【转载】关于treeview的多层显示的科学用法!

    http://blogs.msdn.com/b/mikehillberg/archive/2009/10/30/treeview-and-hierarchicaldatatemplate-step-b ...

  7. Drools 规则学习

    Drools 规则学习 在 Drools 当中,一个标准的规则文件就是一个以“.drl”结尾的文本文件,由于它是一个标准的文本文件,所以可以通过一些记事本工具对其进行打开.查看和编辑.规则是放在规则文 ...

  8. 【iOS 使用github上传代码】详解

    [iOS 使用github上传代码]详解 一.github创建新工程 二.直接添加文件 三.通过https 和 SSH 操作两种方式上传工程 3.1https 和 SSH 的区别: 3.1.1.前者可 ...

  9. c#教程之通过数据绑定修改数据

    通过数据绑定修改数据 "实体框架"提供了与数据库的双向通信通道.前面已经讲述了如何使用"实体框架"获 取数据,现在来看看如何修改获取的信息,并将改动发送回数据库 ...

  10. Android 中 LayoutInflater 的使用

    一.LayoutInflater 的作用 我们一般使用 LayoutInflater 做一件事:View inflate(int resource, ViewGroup root); inflate( ...