jquery的固定定位效果

今天作了个固定定位的效果。好比对导航须要进行固定定位效果：

当没有滚动到导航下面，导航正常显示。

当滚动到导航下面，导航就固定到顶部。

 

这个效果使用了jquery的方法实现，具体思路为：

1)首先获取导航相对与文档的偏移量top（使用offset().top）

2)定义滚动事件，获取滚动元素的scrollTop，对scrollTop及top进行比较

3)若scrollTop超过了top，则对导航进行position:fixed设置，若没有超过，则对导航设置默认的position:static.

另外针对跳转到固定位置，不少处理是经过锚点实现，location.href=#id或者location.hash=#id这种形式实现。其实也能够利用jquery的offset().top来达到一样的效果，具体能够看下面代码中针对固定定位元素的click事件的处理。 

 

这里写了个demo：

<! doctype html >
< html >
< head >
< meta  charset ="utf8" >
< title >jquery固定定位demo </ title >
< style  type ="text/css" >
    body{ margin: 0; padding-top: 100px; background-color: #fff;}
    .content{ width: 500px; height: 300px; background-color: #ccc;}
    h2{ padding: 10px; background-color: #000; color: #fff;}
</ style >
< script  type ="text/javascript"  src ="jquery.js" ></ script >
</ head >
< body >
     < div  class ="floor" >
         < h2  class ="fixed" >第一楼 </ h2 >
         < div  class ="content" >ddddd </ div >
     </ div >
     < div  class ="floor" >
         < h2 >第二楼 </ h2 >
         < div  class ="content" >ffff </ div >
     </ div >
     < div  class ="floor" >
         < h2 >第三楼 </ h2 >
         < div  class ="content" >sdfsf </ div >
     </ div >
     < div  class ="floor" >
         < h2 >第四楼 </ h2 >
         < div  class ="content" >aaaaaa </ div >
     </ div >
     < script  type ="text/javascript" >
         var fixed = $(".fixed");
         var position = fixed.css("position");
         var offsetTop = fixed.offset().top;
         // 定义滚动事件，判断scrollTop及offsetTop
        $(window).scroll( function(){
             var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
             if(scrollTop > offsetTop){
                fixed.css({"position":"fixed","width":"100%","top":"0"});
            } else{
                fixed.removeAttr("style").css({"position":position,"width":"100%"});
                
            }
        });
         // 点击固定元素，回到最初的位置
        fixed.bind("click", function(){
             if($( this).css("position") == "fixed"){
                $( this).removeAttr("style").css({"position":"static","width":"100%"});    
                $(document).scrollTop(offsetTop);
            }
            
        });
    
     </ script >
</ body >

</html>