本文通过实例说明jQuery可以实现与IE6兼容的滚动监控功能。分享给大家参考，如下：

其实这个东西本来是打算用原生javascript写的，但是原生javascript拿类监控滚动条太麻烦了，所以用jQuery也无所谓，反正兼容IE6。

将达到以下效果：

也就是说，滚动监控在网页中有点常见。对应的标题，在哪里滚动，左边的滚动条在当前标题的前面。它变成了“”，当然左边的标题也可以点击，立即滚动到你应该滚动的地方。

首先是页面布局部分，代码如下，请忽略大量的JavaScript介绍，只是为了占格和说明效果。

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN ' ' http://www . w3 . org/TR/HTML 4/strict . DTD ' HTML head meta http-equiv=' Content-Type ' Content=' text/HTML；charset=utf-8 ' title scrolling monitor/title script type=' text/JavaScript ' src=' http : js/jquery-1 . 11 . 1 . js '/script type=' text/JavaScript ' src=' http : js/ie6 fixed . js '/script/head body div style=' float 3360 left；宽度：20%；div id=' scroll spy ' style=' position : fixed；div id=' debug '/div/div/div id=' content ' style=' float : left；Width:80%' p class='title '英文简介/p p JavaScript也用于非基于web的环境，例如pdf文档、特定于站点的浏览器和桌面小部件。更新更快的JavaScript虚拟机(VMs)和建立在其上的平台也提高了JavaScript在服务器端web应用程序中的普及程度。在客户端，JavaScript传统上是作为一种解释语言实现的，但是最近的浏览器执行即时编译。它还用于游戏开发、桌面和移动应用程序的创建，以及带有运行时环境(如node . js/p p class=' title ' origin/p pNetscape最初将其脚本语言命名为LiveScript，后来Netscape与Sunrise Company合作后将其重命名为JavaScript[7]。JavaScript最初的灵感来源于Java，它的目标之一就是“看起来像Java”[8]，所以在语法上有相似之处，一些名字和命名规范都是从Java借用过来的。但是JavaScript的主要设计原则来自Self和Scheme[9]。JavaScript和Java之间的名称相似性是网景公司出于营销原因与太阳微系统公司达成协议的结果。为了获得技术优势，微软引入JScript来满足JavaScript脚本语言。为了实现互操作性，Ecma国际(前身是欧洲计算机制造商协会)创建了ECMA-262标准(ECMAScript)。现在两者都属于ECMAScript的实现。虽然JavaScript作为非程序员的脚本语言得到了推广和宣传，但对于程序员来说却不是，JavaScript有着非常丰富的特性。/p p class='title '区别/p p不同于服务器端脚本语言，如PHP和ASP。JavaScript主要作为客户端脚本语言运行在用户的浏览器上，不需要服务器的支持。所以在早期，程序员更喜欢用JavaScript来减轻服务器的负担，但同时也带来了另一个问题：安全性。有了强大的服务器，虽然程序员现在更喜欢在服务器上运行脚本来保证安全性，但JavaScript仍然以其跨平台、易用的优势而广受欢迎。同时，一些特殊的功能(比如AJAX)必须依靠Javascript才能在客户端得到支持。随着V8等引擎和Node.js等框架的发展，以及其事件驱动和异步IO等特性，JavaScript逐渐被用于编写服务器端程序。/p p class='title' title 2/p网景最初将其脚本语言命名为LiveScript，后来网景与升阳公司合作后将其名称改为JavaScript[7]。JavaScript最初的灵感来源于Java，它的目标之一就是“看起来像Java”[8]，所以在语法上有相似之处，一些名字和命名规范都是从Java借用过来的。但是JavaScript的主要设计原则来自Self和Scheme[9]。JavaScript和Java之间的名称相似性是网景公司出于营销原因与太阳微系统公司达成协议的结果。为了获得技术优势，微软引入JScript来满足JavaScript脚本语言。为了实现互操作性，Ecma国际(前身是欧洲计算机制造商协会)创建了ECMA-262标准(ECMAScript)。现在两者都属于ECMAScript的实现。虽然JavaScript作为非程序员的脚本语言得到了推广和宣传，但对于程序员来说却不是，JavaScript有着非常丰富的特性。/p /div /div /body/html基本思想如下：

在这里，

(1)故意在第12行放一个空格，因为不要让div style=' float:left宽度：20%；”/div这个div太空了，没有宽度。

(2)为了让IE6支持position:fixed属性，引入了下面的ie6fixed.js，这个东西的由来就不再有了。创建一个新的js文件，并复制以下代码来保存它。编辑网页时，引入此脚本，使IE6支持位置：固定。同时，对IE6中实现位置3360 Fixed的脚本使用$ ('#)。是兼容的。

ie6fixed.js:

（函数($){ var isIE=！窗户ActiveXObjectvar isIE6=isIE！窗户. XMLHttpRequestvar isIE8=isIE！文件。文档模式(文档。文档模式==8)；var isIE7=isIE！isIE6！isie 8if(isie 6 | | isie 7){//ie6 | ie7 | ie8不在标准模式$()。ready(function(){ var body=document。身体；var BLANK _ GIFif(正文。当前样式。背景附件！=' fixed '){ if(body。当前样式。背景图像==' none '){ body。runtimestyle。背景图像=' URL '(' BLANK _ GIF ')'；//假人身体。runtimestyle。背景附件='固定'；} } });} $.fn.extend({ toFixed:函数（位置){ var isIE=！窗户ActiveXObjectvar isIE6=isIE！窗户. XMLHttpRequestvar isIE8=isIE！文件。文档模式(文档。文档模式==8)；var isIE7=isIE！isIE6！isie 8 if(isie 6 | | isie 7){ } else { return this；}返回这个。每个(function(){ var t=$(this)；var id=t.get(0).id | | ' fixed _ ' Parsent(Math。兰德()* 10000)；var rect={ w: t.width()、h: t.height()、l: t.css('左)、r: t.css('右)、t': t.css('上)、b: t.css('下')};if (rect.l！=' auto '){ rectl=ParSeint(rect。l)；} else { rectl=0；} if (rect.r！=' auto '){ rectr=ParSeint(rect。r)；} else { rectr=0；} if (rect.t！=' auto '){ rect t=ParSeint(rect。t)；} else { rect=0；} if (rect.b！=' auto '){ rectb=ParSeint(rect。b)；} else { rectb=0；} var _pos={ left: rect.l，right: rect.r，top: rect.t，bottom : rect。b }；_pos=$ .延伸(_pos，位置);var CSS=t . attr(' style ')；CSS=' position : absolutebottom : auto right : auto clear : both '；if (rect.l！='auto' rect.r！=' auto ')CSS=' width :表达式(eval(文档。兼容模式文档。compat mode== ' css1 compat ')？文档元素。客户端宽度-rectl-rectr :文档。尸体。客户端宽度-' rectl '-' rectr ')；'；if (rect.l=='auto' rect.r！=' auto ')CSS=' left :表达式(eval(文档。兼容模式文档。compat mode== ' css1 compat ')？文档元素。scrolleft(文档元素。客户端宽度-这个。客户端宽度-' rectr '):文档。尸体。收集(文件。尸体。客户端宽度-这个。客户端宽度-' rectr '；";else CSS=' left :表达式(eval(文档。兼容模式文档。compat mode== ' css1 compat ')？文档元素。搜索' rectl ' :文档。尸体。scroll ft ' rectl ')；";if (rect.t=='auto' rect.b！=' auto ')CSS=' top :表达式(eval(文档。兼容模式文档。compat mode== ' css1 compat ')？文档元素。向上滚动(文档元素。客户身高-这个。客户端高度-' rectb '):文档。尸体。向上滚动(文档。尸体。客户身高-这个。客户端高度-' rectb '；";else CSS=' top :表达式(eval(文档。兼容模式文档。compat mode== ' css1 compat ')？文档元素。滚动顶部“rect”:文档。尸体。滚动顶部“矩形”)；";t.attr('style '，CSS)；});} });})(jQuery)；随后，以下的核心脚本才是本页面实现的关键所在：

脚本类型=' text/JavaScript ' $(' # scroll spy ')。toFixed()；//让div scrollspy也能定位IE6中的： fixed；//首先遍历标题，生产目录var title _ counter=0；$('.标题')。每个(函数(){ title _ counter//为类为title的每个标题设置锚点，并链接$ (this)。#scrollspy中每个锚点的attr ('id '，' title ' title _ counter)；$('#scrollspy ')。追加(' pa href='#title' title_counter ' ' .'$(这个)。html()'/a/p ')；//这里用div和p的组合代替ul和li，ul和li没有位置： fixed；属性。你不能不随着滚动移动。});//之后显示滚动条的滚动事件，一旦滚动条滚动就会触发。$(窗口)。roll(function(){ var height _ now=$(window))。scroll top()；//取当前滚动条title_counter的高度位置=0；var title _ now=0；//遍历左侧目录$('。标题')。每个(函数(){ $(' # scrolpyp : eq(' title _ counter ')a ')。html('。'$(这个)。html())；//将所有目录前的符号更改为。if(height_now$(this))。偏移量()。top){ title _ now；//$(这个)。偏移量()。top拿出每个标题的高度位置，看看有多少标题通过了当前滚动条的高度位置} title _ counter});$('#debug ')。html('当前高度：' height_now 'px，标题号：' title_counter '，当前标题：' title _ now ')；//这一行只是为了输出信息让大家看清楚，没有if(title _ now title _ counter-1){//主要是为了防止一些浏览器滚动到底部，没有定位最后一个标题。title _ now=title _ counter-1；} $(' # scrollsyp : eq(' title _ now ')a ')。html(' <> > ' $(. title : eq(' title _ now ')')。html())；//表示当前滚动条在最后一个标题之前的高度位置。替换为" " " })；/script更多对jQuery感兴趣的读者，请查看本网站主题：《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》、《jQuery常用插件及用法总结》、0103010。

希望本文对大家的jQuery程序设计有所帮助。