【JavaScript】兼容IE6的滚动监听

来源：互联网发布：js获取整个form的值编辑：程序博客网时间：2024/04/30 17:02

本文是《【jQuery】兼容IE6的滚动监听》（点击打开链接）的进一步改进，这次无须引入jQuery纯粹使用JavaScript来实现，精简了语法。同时，不会在JavaScript处写过多的代码，导致难以维护。具体效果如下，此乃IE6的效果：

这里运用了锚点跳转，同时，随着滚动条的滚动右方目录的超级链接会变色。

这个目录左方的点的实心还会进一步变化。

具体思想如下，主要是判断此时浏览器的顶部到达什么位置。

首先是基本的HTML布局，这里关于目录在IE6的position:fixed效果在《【CSS】IE6中的position：fixed问题与随滚动条滚动的效果》（点击打开链接）已经说过了，这里不再赘述。之后，目录的布置采用了ul-li列表，而且利用list-style设置li前面点的样式，当然你不喜欢这个点就设置为none。个人觉得没必要做成那种炫酷的时间轴效果。反正你做多了，你的客户也不会表扬你，当然如果其非要做成效果，你就只好在这个li前面贴图片咯。具体是用list-style-image:url("xxx");。

然后，这个被设置为position:fixed的目录，你给个top或者bottom属性它就好，top与left坚决不设置。

让其在水平方向上严格遵循父div的float:left,width:20%的布局。

最后，注意将各个诸如<a id="title1" name="title1"></a>的锚点放在标题之前，让其处于标题之上，而不是在标题之下，跳转的时候能够看到标题。

<!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>Untitled Document</title><style type="text/css">.title_list {    position: fixed;    top: 100px;/*IE6实现position: fixed;*/_position: absolute;_top: expression(eval(document.documentElement.scrollTop));_margin-top:100px;*list-style-position:inside;/*解决IE6与IE7前面的点不显示的问题*/}</style></head><body><div style="float:left;width:80%;min-height:100px;"><a id="title1" name="title1"></a><h1>标题1</h1><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><a id="title2" name="title2"></a><h1>标题2</h1><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><a id="title3" name="title3"></a><h1>标题3</h1><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><a id="title4" name="title4"></a><h1>标题4</h1><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p></div><div style="float:left;width:20%;"><ul class="title_list" id="title_list"><li style="list-style:disc;"><a style="color:red" href="#title1">标题1</a></li><li style="list-style:circle;"><a href="#title2">标题2</a></li><li style="list-style:circle;"><a href="#title3">标题3</a></li><li style="list-style:circle;"><a href="#title4">标题4</a></li></ul></div><div style="clear:both"></div>        </body></html>

之后是脚本部分，这次将ul-li目录部分放到HTML去，而且直接在HTML放好锚点，因此脚本精简很多，按照基本思想的图，去实现。这里求flag的时候，因为是一个条件结构求浏览器的顶部去到哪里，对应多个条件分支，可能处在标题1，标题2，标题3……，所以这里活用三目条件运算符?:，用到了《【C++】对cin输入字符的判断与分段函数的处理》（点击打开链接）的写法。

<script type="text/javascript">      window.onscroll = function(){          var t=document.documentElement.scrollTop||document.body.scrollTop;//取当前高度        //取各个锚点的位置        var title1_height=document.getElementById("title1").offsetTop;var title2_height=document.getElementById("title2").offsetTop;var title3_height=document.getElementById("title3").offsetTop;var title4_height=document.getElementById("title4").offsetTop;flag=(t<title1_height)?-1:(t<title2_height)?0:(t<title3_height)?1:(t<title4_height)?2:3;var title_list_arr=document.getElementById("title_list").getElementsByTagName("li");//取出 id="title_list"的ul下的li数组for(var i=0;i<title_list_arr.length;i++){if(flag==i){//找到当前浏览器固定达到的位置所对应的标题   title_list_arr[i].style.listStyle="disc";   title_list_arr[i].getElementsByTagName("a")[0].style.color="red";//旗下的a标签里面的内容为红色   }else{//其余标题title_list_arr[i].style.listStyle="circle";title_list_arr[i].getElementsByTagName("a")[0].style.color="blue";//旗下的a标签里面的内容为蓝色}}if(flag==-1){//如果没有任何一个标题碰到浏览器顶部，那么就认为是现在悬停在第一个标题title_list_arr[0].style.listStyle="disc";title_list_arr[i].getElementsByTagName("a")[0].style.color="red";//旗下的a标签里面的内容为红色}        }  </script>

2 0