jQuery implements scroll monitoring function compatible with IE6

This article mainly introduces jQuery to implement the scrolling monitoring function that is compatible with IE6. It analyzes jQuery's event monitoring, response and dynamic transformation of page attributes for different browsers in the form of examples. Friends who need it can refer to it. I hope Can help everyone.

Actually, this thing was originally planned to be written in native javascript, but the native javascript was too troublesome to obtain classes and monitor the scrolling of the scroll bar, so jQuery was used. It didn't matter. It was compatible with IE6 anyway.

will achieve the following effect:

It is also a common scroll monitoring in web pages. Wherever you scroll to the corresponding title, the scroll bar on the left is in front of the current title. . . It becomes 》》》, and of course, the title on the left can also be clicked to scroll to the right place immediately.

The first is the web page layout part. The code is as follows. Please ignore the large amount of JavaScript introduction, just to occupy the grid and illustrate the effect.

<!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>滚动监听</title>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/ie6fixed.js"></script>
  </head>
  <body>
    <p>
      <p style="float:left;width:20%;">
        <p id="scrollspy" style="position:fixed;">
        <p id="debug"></p>
        </p>
      </p>
      <p 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在最初将其脚本语言命名为LiveScript，后来网景在与昇阳公司合作之后将其改名为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">标题2</p>
        <p>Netscape在最初将其脚本语言命名为LiveScript，后来网景在与昇阳公司合作之后将其改名为JavaScript[7]。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”[8]，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme[9]。JavaScript与Java名称上的近似，是当时网景为了营销考虑与太阳微系统达成协议的结果。为了获取技术优势，微软推出了JScript来迎战JavaScript的脚本语言。为了互用性，Ecma国际（前身为欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript）。现在两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言，而非作为给程序人员的脚本语言来推广和宣传，但是JavaScript具有非常丰富的特性。</p>
      </p>
    </p>
  </body>
</html>

Copy after login

The basic idea is as follows:

Here,

(1) is in line 12 I put a space on purpose because I don’t want

to be empty, so that it has no width.

(2) In order to make IE6 support the position:fixed attribute, the following ie6fixed.js is introduced. The origin of this thing is unknown. Create a new js file and copy the following Code saving, when editing a web page, introduce this script in order to make IE6 support position:fixed. At the same time, use $("#p name").toFixed(); for the script to implement position:fixed in IE6. is compatible.

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 || &#39;fixed_&#39; + parseInt(Math.rand() * 10000);
        var rect = {
          w: t.width(),
          h: t.height(),
          l: t.css(&#39;left&#39;),
          r: t.css(&#39;right&#39;),
          &#39;t&#39;: t.css(&#39;top&#39;),
          b: t.css(&#39;bottom&#39;)
        };
        if (rect.l != &#39;auto&#39;) {
          rectl = parseInt(rect.l);
        }
        else {
          rectl = 0;
        }
        if (rect.r != &#39;auto&#39;) {
          rectr = parseInt(rect.r);
        }
        else {
          rectr = 0;
        }
        if (rect.t != &#39;auto&#39;) {
          rectt = parseInt(rect.t);
        }
        else {
          rectt = 0;
        }
        if (rect.b != &#39;auto&#39;) {
          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(&#39;style&#39;) + &#39;;&#39;;
        css += &#39;position:absolute;bottom:auto;right:auto;clear:both;&#39;;
        if (rect.l != &#39;auto&#39; && rect.r != &#39;auto&#39;)
          css += &#39;width:expression(eval(document.compatMode && document.compatMode==\&#39;CSS1Compat\&#39;) ? documentElement.clientWidth - &#39; + rectl + &#39; - &#39; + rectr + &#39; : document.body.clientWidth - &#39; + rectl + &#39; - &#39; + rectr + &#39; );&#39;;
        if (rect.l == &#39;auto&#39; && rect.r != &#39;auto&#39;)
          css += &#39;left:expression(eval(document.compatMode && document.compatMode==\&#39;CSS1Compat\&#39;) ? documentElement.scrollLeft + (documentElement.clientWidth-this.clientWidth - &#39; + rectr + &#39;) : document.body.scrollLeft +(document.body.clientWidth-this.clientWidth - &#39; + rectr + &#39;));&#39;;
        else
          css += &#39;left:expression(eval(document.compatMode && document.compatMode==\&#39;CSS1Compat\&#39;) ? documentElement.scrollLeft + &#39; + rectl + &#39; : document.body.scrollLeft + &#39; + rectl + &#39;);&#39;;
        if (rect.t == &#39;auto&#39; && rect.b != &#39;auto&#39;)
          css += &#39;top:expression(eval(document.compatMode && document.compatMode==\&#39;CSS1Compat\&#39;) ? documentElement.scrollTop + (documentElement.clientHeight-this.clientHeight - &#39; + rectb + &#39;) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight - &#39; + rectb + &#39;));&#39;;
        else
          css += &#39;top:expression(eval(document.compatMode && document.compatMode==\&#39;CSS1Compat\&#39;) ? documentElement.scrollTop + &#39; + rectt + &#39; : document.body.scrollTop + &#39; + rectt + &#39;);&#39;;
        t.attr(&#39;style&#39;, css);
      });
    }
  });
})(jQuery);

Copy after login

Then, the following core script is the key to the implementation of this page:

<script type="text/javascript">
  $("#scrollspy").toFixed();//让scrollspy这个p在IE6同样可以position:fixed;
  //开始先遍历标题，生产目录
  var title_counter=0;
  $(".title").each(function(){
    title_counter++;
    //对于每一个class为title的标题设置锚点，同时在#scrollspy同生产每一个锚点的链接
    $(this).attr("id","title"+title_counter);
    $("#scrollspy").append("<p><a href=&#39;#title"+title_counter+"&#39;>。。。"+$(this).html()+"</a></p>");
    //这里使用到<p>与<p>的组合，而不是<ul>与<li>，<ul>与<li>没有position:fixed;属性。不能不随滚动的移动而移动。
  });
  //之后是显示滚动条滚动事件，滚动条一旦滚动都会触发这个事件
  $(window).scroll(function() {
    var height_now=$(window).scrollTop();//取当前滚动条的高度位置
    title_counter=0;
    var title_now=0;//再次遍历左边的目录
    $(".title").each(function(){
      $("#scrollspy>p:eq("+title_counter+")>a").html("。。。"+$(this).html());//先将所有目录前的符号重新变成。。。
      if(height_now>$(this).offset().top){
        title_now++;//$(this).offset().top取出各个标题的高度位置，看当前滚动条的高度位置迈过了多少个标题
      }
      title_counter++;
    });
    $("#debug").html("当前高度："+height_now+"px,标题数："+title_counter+",当前标题为："+title_now);//这行只是为了输出信息给大家看清楚，可以没有
    if(title_now>title_counter-1){//主要是防止某些浏览器滚动到最底部，无法定位到最后一个标题的现象
      title_now=title_counter-1;
    }
    $("#scrollspy>p:eq("+title_now+")>a").html("》》》"+$(".title:eq("+title_now+")").html());//对当前滚动条的高度位置迈过的最后一个标题前的。。。换成》》》
  });
</script>

Copy after login

Related recommendations:

Detailed explanation of JavaScript implementation of binding listening function instances for event handles

The above is the detailed content of jQuery implements scroll monitoring function compatible with IE6_jquery. For more information, please follow other related articles on the PHP Chinese website!