jQuery實(shí)現(xiàn)可兼容IE6的滾動(dòng)監(jiān)聽功能
更新時(shí)間：2017年09月20日 11:21:03 作者：yongh701
這篇文章主要介紹了jQuery實(shí)現(xiàn)可兼容IE6的滾動(dòng)監(jiān)聽功能,結(jié)合實(shí)例形式分析了jQuery針對(duì)不同瀏覽器的事件監(jiān)聽、響應(yīng)及頁(yè)面屬性動(dòng)態(tài)變換相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)可兼容IE6的滾動(dòng)監(jiān)聽功能。分享給大家供大家參考，具體如下：
其實(shí)這東西本打算用原生的javascript來寫，但是原生的javascript取class與監(jiān)聽滾動(dòng)條的滾動(dòng)過于麻煩，因此上了jQuery，沒關(guān)系，反正兼容IE6就行。
將實(shí)現(xiàn)如下的效果：
也就是在網(wǎng)頁(yè)中有點(diǎn)常見的滾動(dòng)監(jiān)聽。相應(yīng)的標(biāo)題，滾到哪里，則左邊的滾動(dòng)條當(dāng)前標(biāo)題前的。。。就變成》》》，，當(dāng)然了，左邊的標(biāo)題同樣是可以點(diǎn)擊，馬上滾到該滾的地方。
首先是網(wǎng)頁(yè)布局部分，代碼如下，請(qǐng)忽略大堆的JavaScript介紹，只是為了占格子，說明效果。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>滾動(dòng)監(jiān)聽</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/ie6fixed.js"></script>
</head>
<body>
<div>
<div style="float:left;width:20%;">
<div id="scrollspy" style="position:fixed;">
<div id="debug"></div>
</div>
</div>
<div id="content" style="float:left;width:80%">
<p class="title">英文介紹</p>
<p>JavaScript is also used in environments that are not web-based, such as PDF documents, site-specific browsers, and desktop widgets. Newer and faster JavaScript virtual machines (VMs) and platforms built upon them have also increased the popularity of JavaScript for server-side web applications. On the client side, JavaScript has been traditionally implemented as an interpreted language, but more recent browsers perform just-in-time compilation. It is also used in game development, the creation of desktop and mobile applications, and server-side network programming with runtime environments such as Node.js.</p>
<p class="title">由來</p>
<p>Netscape在最初將其腳本語(yǔ)言命名為L(zhǎng)iveScript，后來網(wǎng)景在與昇陽(yáng)公司合作之后將其改名為JavaScript[7]。JavaScript最初受Java啟發(fā)而開始設(shè)計(jì)的，目的之一就是“看上去像Java”[8]，因此語(yǔ)法上有類似之處，一些名稱和命名規(guī)范也借自Java。但JavaScript的主要設(shè)計(jì)原則源自Self和Scheme[9]。JavaScript與Java名稱上的近似，是當(dāng)時(shí)網(wǎng)景為了營(yíng)銷考慮與太陽(yáng)微系統(tǒng)達(dá)成協(xié)議的結(jié)果。為了獲取技術(shù)優(yōu)勢(shì)，微軟推出了JScript來迎戰(zhàn)JavaScript的腳本語(yǔ)言。為了互用性，Ecma國(guó)際（前身為歐洲計(jì)算機(jī)制造商協(xié)會(huì)）創(chuàng)建了ECMA-262標(biāo)準(zhǔn)（ECMAScript）?，F(xiàn)在兩者都屬于ECMAScript的實(shí)現(xiàn)。盡管JavaScript作為給非程序人員的腳本語(yǔ)言，而非作為給程序人員的腳本語(yǔ)言來推廣和宣傳，但是JavaScript具有非常豐富的特性。</p>
<p class="title">區(qū)別</p>
<p>不同于服務(wù)器端腳本語(yǔ)言，例如PHP與ASP，JavaScript主要被作為客戶端腳本語(yǔ)言在用戶的瀏覽器上運(yùn)行，不需要服務(wù)器的支持。所以在早期程序員比較青睞于JavaScript以減少對(duì)服務(wù)器的負(fù)擔(dān)，而與此同時(shí)也帶來另一個(gè)問題：安全性。而隨著服務(wù)器的強(qiáng)壯，雖然現(xiàn)在的程序員更喜歡運(yùn)行于服務(wù)端的腳本以保證安全，但JavaScript仍然以其跨平臺(tái)、容易上手等優(yōu)勢(shì)大行其道。同時(shí)，有些特殊功能（如AJAX）必須依賴Javascript在客戶端進(jìn)行支持。隨著引擎如V8和框架如Node.js的發(fā)展，及其事件驅(qū)動(dòng)及異步IO等特性，JavaScript逐漸被用來編寫服務(wù)器端程序。</p>
<p class="title">標(biāo)題2</p>
<p>Netscape在最初將其腳本語(yǔ)言命名為L(zhǎng)iveScript，后來網(wǎng)景在與昇陽(yáng)公司合作之后將其改名為JavaScript[7]。JavaScript最初受Java啟發(fā)而開始設(shè)計(jì)的，目的之一就是“看上去像Java”[8]，因此語(yǔ)法上有類似之處，一些名稱和命名規(guī)范也借自Java。但JavaScript的主要設(shè)計(jì)原則源自Self和Scheme[9]。JavaScript與Java名稱上的近似，是當(dāng)時(shí)網(wǎng)景為了營(yíng)銷考慮與太陽(yáng)微系統(tǒng)達(dá)成協(xié)議的結(jié)果。為了獲取技術(shù)優(yōu)勢(shì)，微軟推出了JScript來迎戰(zhàn)JavaScript的腳本語(yǔ)言。為了互用性，Ecma國(guó)際（前身為歐洲計(jì)算機(jī)制造商協(xié)會(huì)）創(chuàng)建了ECMA-262標(biāo)準(zhǔn)（ECMAScript）?，F(xiàn)在兩者都屬于ECMAScript的實(shí)現(xiàn)。盡管JavaScript作為給非程序人員的腳本語(yǔ)言，而非作為給程序人員的腳本語(yǔ)言來推廣和宣傳，但是JavaScript具有非常豐富的特性。</p>
</div>
</div>
</body>
</html>
基本思想如下：
這里，
（1）在第12行故意放一個(gè)空格，是因?yàn)椴灰?span style="color: #0000ff"><div style="float:left;width:20%;"></div>這個(gè)div空空是也，以致于沒有了寬度。
（2）為了使IE6支持position:fixed屬性，引入了如下的一個(gè)ie6fixed.js，這東西的出處已經(jīng)無從可考，新建一個(gè)js文件，拷貝下面的代碼保存，在編輯網(wǎng)頁(yè)的時(shí)候?yàn)榱耸笽E6支持position:fixed引入這段腳本，同時(shí)對(duì)要在IE6實(shí)現(xiàn)position:fixed的腳本處，使用$("#div名稱").toFixed();便兼容。
ie6fixed.js：
(function($){
var isIE = !!window.ActiveXObject;
var isIE6 = isIE && !window.XMLHttpRequest;
var isIE8 = isIE && !!document.documentMode && (document.documentMode == 8);
var isIE7 = isIE && !isIE6 && !isIE8;
if (isIE6 || isIE7) { //ie6 | ie7 | ie8 not in standards mode
$().ready(function(){
var body = document.body;
var BLANK_GIF;
if (body.currentStyle.backgroundAttachment != "fixed") {
if (body.currentStyle.backgroundImage == "none") {
body.runtimeStyle.backgroundImage = "url(" + BLANK_GIF + ")"; // dummy
body.runtimeStyle.backgroundAttachment = "fixed";
}
}
});
}
$.fn.extend({
toFixed: function(position){
var isIE = !!window.ActiveXObject;
var isIE6 = isIE && !window.XMLHttpRequest;
var isIE8 = isIE && !!document.documentMode && (document.documentMode == 8);
var isIE7 = isIE && !isIE6 && !isIE8;
if (isIE6 || isIE7) {
}
else {
return this;
}
return this.each(function(){
var t = $(this);
var id = t.get(0).id || 'fixed_' + parseInt(Math.rand() * 10000);
var rect = {
w: t.width(),
h: t.height(),
l: t.css('left'),
r: t.css('right'),
't': t.css('top'),
b: t.css('bottom')
};
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') {
rectt = parseInt(rect.t);
}
else {
rectt = 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 = $.extend(_pos, position);
var css = t.attr('style') + ';';
css += 'position:absolute;bottom:auto;right:auto;clear:both;';
if (rect.l != 'auto' && rect.r != 'auto')
css += 'width:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.clientWidth - ' + rectl + ' - ' + rectr + ' : document.body.clientWidth - ' + rectl + ' - ' + rectr + ' );';
if (rect.l == 'auto' && rect.r != 'auto')
css += 'left:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.scrollLeft + (documentElement.clientWidth-this.clientWidth - ' + rectr + ') : document.body.scrollLeft +(document.body.clientWidth-this.clientWidth - ' + rectr + '));';
else
css += 'left:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.scrollLeft + ' + rectl + ' : document.body.scrollLeft + ' + rectl + ');';
if (rect.t == 'auto' && rect.b != 'auto')
css += 'top:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.scrollTop + (documentElement.clientHeight-this.clientHeight - ' + rectb + ') : document.body.scrollTop +(document.body.clientHeight-this.clientHeight - ' + rectb + '));';
else
css += 'top:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.scrollTop + ' + rectt + ' : document.body.scrollTop + ' + rectt + ');';
t.attr('style', css);
});
}
});
})(jQuery);
隨后，以下的核心腳本才是本頁(yè)面實(shí)現(xiàn)的關(guān)鍵所在：
<script type="text/javascript">
$("#scrollspy").toFixed();//讓scrollspy這個(gè)div在IE6同樣可以position:fixed;
//開始先遍歷標(biāo)題，生產(chǎn)目錄
var title_counter=0;
$(".title").each(function(){
title_counter++;
//對(duì)于每一個(gè)class為title的標(biāo)題設(shè)置錨點(diǎn)，同時(shí)在#scrollspy同生產(chǎn)每一個(gè)錨點(diǎn)的鏈接
$(this).attr("id","title"+title_counter);
$("#scrollspy").append("<p><a href='#title"+title_counter+"'>。。。"+$(this).html()+"</a></p>");
//這里使用到<div>與<p>的組合，而不是<ul>與<li>，<ul>與<li>沒有position:fixed;屬性。不能不隨滾動(dòng)的移動(dòng)而移動(dòng)。
});
//之后是顯示滾動(dòng)條滾動(dòng)事件，滾動(dòng)條一旦滾動(dòng)都會(huì)觸發(fā)這個(gè)事件
$(window).scroll(function() {
var height_now=$(window).scrollTop();//取當(dāng)前滾動(dòng)條的高度位置
title_counter=0;
var title_now=0;//再次遍歷左邊的目錄
$(".title").each(function(){
$("#scrollspy>p:eq("+title_counter+")>a").html("。。。"+$(this).html());//先將所有目錄前的符號(hào)重新變成。。。
if(height_now>$(this).offset().top){
title_now++;//$(this).offset().top取出各個(gè)標(biāo)題的高度位置，看當(dāng)前滾動(dòng)條的高度位置邁過了多少個(gè)標(biāo)題
}
title_counter++;
});
$("#debug").html("當(dāng)前高度："+height_now+"px,標(biāo)題數(shù)："+title_counter+",當(dāng)前標(biāo)題為："+title_now);//這行只是為了輸出信息給大家看清楚，可以沒有
if(title_now>title_counter-1){//主要是防止某些瀏覽器滾動(dòng)到最底部，無法定位到最后一個(gè)標(biāo)題的現(xiàn)象
title_now=title_counter-1;
}
$("#scrollspy>p:eq("+title_now+")>a").html("》》》"+$(".title:eq("+title_now+")").html());//對(duì)當(dāng)前滾動(dòng)條的高度位置邁過的最后一個(gè)標(biāo)題前的。。。換成》》》
});
</script>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery滾動(dòng)監(jiān)聽實(shí)現(xiàn)商城樓梯式導(dǎo)航效果
- 基于jQuery實(shí)現(xiàn)手風(fēng)琴菜單、層級(jí)菜單、置頂菜單、無縫滾動(dòng)效果
- jquery實(shí)現(xiàn)的鼠標(biāo)下拉滾動(dòng)置頂效果
- JQuery插件iScroll實(shí)現(xiàn)下拉刷新，滾動(dòng)翻頁(yè)特效
- js/jquery獲取瀏覽器窗口可視區(qū)域高度和寬度以及滾動(dòng)條高度實(shí)現(xiàn)代碼
- jQuery scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條分頁(yè)示例
- jQuery創(chuàng)建平滑的頁(yè)面滾動(dòng)(頂部或底部)
- js，jquery滾動(dòng)/跳轉(zhuǎn)頁(yè)面到指定位置的實(shí)現(xiàn)思路
- jquery無縫向上滾動(dòng)實(shí)現(xiàn)代碼
- JS JQUERY實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾到底的方法
- jQuery實(shí)現(xiàn)的監(jiān)聽導(dǎo)航滾動(dòng)置頂狀態(tài)功能示例
相關(guān)文章
Jquery+CSS 創(chuàng)建流動(dòng)導(dǎo)航菜單 Fluid Navigation
有時(shí)，一個(gè)網(wǎng)站的導(dǎo)航菜單文字不能提供足夠的信息，來表達(dá)當(dāng)前菜單按鈕的內(nèi)容，一般的解決辦法是使用提示信息ToolTip，那么本文介紹的流動(dòng)導(dǎo)航菜單Fluid Navigation也可以解決此問題，同時(shí)也為網(wǎng)站設(shè)計(jì)的添加了一些時(shí)尚而又動(dòng)感元素。2010-02-02
jquery分頁(yè)優(yōu)化操作實(shí)例分析
這篇文章主要介紹了jquery分頁(yè)優(yōu)化操作,在前文jQuery分頁(yè)顯示的基礎(chǔ)上實(shí)現(xiàn)了避免頻繁查詢的相關(guān)優(yōu)化操作技巧,需要的朋友可以參考下2019-08-08
下面小編就為大家?guī)硪黄猨Query原理系列-常用Dom操作詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
jquery命令匯總,方便使用jquery的朋友，需要的朋友可以收藏下2012-06-06
簡(jiǎn)單分析javascript面向?qū)ο笈c原型
為了說明 JavaScript 是一門徹底的面向?qū)ο蟮恼Z(yǔ)言，首先有必要從面向?qū)ο蟮母拍钪?, 探討一下面向?qū)ο笾械膸讉€(gè)概念：1.一切事物皆對(duì)象，2.對(duì)象具有封裝和繼承特性，3.對(duì)象與對(duì)象之間使用消息通信，各自存在信息隱藏2015-05-05
jquery js 重置表單 reset()具體實(shí)現(xiàn)代碼
我們希望表單提交以后，能reset，由于jquery沒有這個(gè)方法，所以只能采用其他的方法來實(shí)現(xiàn)了，具體如下，有此需求的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
Ajax被認(rèn)為是(Asynchronous(異步) JavaScript And Xml的縮寫）?，F(xiàn)在，允許瀏覽器與服務(wù)器通信而無須刷新當(dāng)前頁(yè)面的技術(shù)都被叫做Ajax。這篇文章主要介紹了原生和jQuery的ajax用法，需要的朋友參考下吧2017-01-01
第一次用JSON作為jquery異步請(qǐng)求的傳輸對(duì)象，結(jié)果在jquery請(qǐng)求后返回的結(jié)果是字符串還是json對(duì)象上折騰了半天。2011-04-04
jQuery是繼prototype之后的又一個(gè)優(yōu)秀的Javascript框架。它是由 John Resig 于 2006 年初創(chuàng)建的，它有助于簡(jiǎn)化 JavaScript™ 以及Ajax 編程。2010-05-05
本文主要介紹了預(yù)加載顯示圖片藝術(shù)實(shí)現(xiàn)的方法--一個(gè)jquery庫(kù)的preLoadImages()函數(shù)，使用這個(gè)函數(shù)就可以輕松實(shí)現(xiàn)圖片預(yù)加載了。需要的朋友可以看下2016-12-12