jquery实现网页定位导航特效

         实现网页定位导航特效需要的几个知识点：

   1、锚点：是网页制作中超链接的一种又叫命名锚点。锚点是一种网页内的超级连接，可以在网页页面内部迅速定位，使用锚点可以在文档中设置标记，这些标记通常放在文档的顶部。html5中已经全部使用id进行锚点连接了。

   2、scroll（[data],fn):当用户滚动指点的元素时会发生scroll事件，scroll事件适用于所有可滚动的元素和window对象（浏览器窗口）。

   $(window).scroll(function(){})当页面滚动条滚动变化时，执行函数。

  3、scrollTop([val]):获取/设置匹配元素相对滚动条顶部的偏移。

  4、offset():获取匹配元素的相对偏移，返回的对象包含两个整型属性，top和left，以像素计算。

  5、针对ie6的兼容性问题，页面定位导航的位置设定不可以使用fixed，还要处理导航的跳动问题，记住下面句话；

html #菜单{

position:absolute;

top:expression((e=document.documentElement.scrollTop)?e:document.body.scrollTop+100+'px');

}

*html,*html body{

background-image:url(about:blank);

background-attachment:fixed;

}

jquery代码实现：

$(document).ready(function(){
     $(window).scroll(function(){
         var top=$(document).scrollTop();
         var menu=$("#menu");
         var terms=$("#content").find(".term");
         var contentId="";
         terms.each(function(){
             var m=$(this);
             var contentTop=m.offset().top;
             if(top>contentTop-200){
                 contentId="#"+m.attr("id");
             }else{
                 return false;
             }
         });
         var currentLink=menu.find(".current");
         if(contentId && currentLink.attr("href")!=contentId){
             currentLink.removeClass("current");
             menu.find("[href="+contentId+"]").addClass("current");
         }
     })
})

JavaScript代码实现：

function hasClass(obj,cls) {
    return obj.className.match(new RegExp("(\\s|^)"+cls+"(\\s|$)"));
}
function removeClass(obj,cls) {
    if(hasClass(obj,cls)){
        var reg=new RegExp("(\\s|^)"+cls+"(\\s|$)");
        obj.className=obj.className.replace(reg,"");
    }
}
function addClass(obj,cls) {
    if(!hasClass(obj,cls)){
        obj.className+=""+cls;
    }
}
function getClass(obj,cls) {
    var element=document.getElementsByTagName("*");
    var result=[];
    for(var i=0;i<element.length;i++){
        if(element[i].className==cls){
            result.push(element[i]);
        }
    }
    return result;
}
window.οnlοad=function () {
 window.οnscrοll=function () {
     var top=document.documentElement.scrollTop ?document.documentElement.scrollTop : document.body.scrollTop;
     var obj=document.getElementById("content");
     var menus=document.getElementById("menu").getElementsByTagName("a");
     var items=getClass(obj,"term");
     var contentId="";
     for(var i=0;i<items.length;i++){
         var contentTop=items[i].offsetTop;
         if(top>contentTop-200){
             contentId=items[i].id;
         }else{
             break;
         }
     }

     if(contentId){
         for(var j=0;j<menus.length;j++){
          var _menu=menus[j];
             var _href=_menu.href.split("#");
             console.log(_href);
             if(_href[_href.length-1]!=contentId){
                 removeClass(_menu,"current");

             }else{
                 addClass(_menu,"current");
             }
         }
     }
 }
}