使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果

如题。

        《1》

        我们经常会实现一种效果，这种效果让页面内的导航条在页面向下拉动的过程中一直固定在某个位置。有时候在顶部，有时候在侧边。实现的方法非常简单，只需要通过CSS进行元素的控制。

        要点有：<1>position:fixed;<2>通过bottom、top、left和right四个属性来对元素在页面中的位置进行调整。

        基本上对这两个css属性进行设置之后就可以实现上面的效果。

        《2》

         但是我们在实际操作过程中，如果使得某个元素一直固定在顶部，页面将会受到严重的影响。所以一般我们的做法是让页面滚动到某个合适的位置之后再让其固定住在某个位置或者出现。

         本文只讲述顶部导航栏在页面滑动到其位置后固定在页面顶部的方法：

          js代码：

         

<!--实现价格筛选栏在滑动到其位置之后紧贴顶部的js  陈烁斌 2013.12.12-->
    <script type="text/javascript">
           //判断导航栏是否在原来位置上的标志，初始为false
	    var test = false;
	    $(window).scroll(function(){
                //获取当前位置到窗口顶部的高度
                var h_num=$(window).scrollTop();
                if(h_num>980){//当当前高度大于导航条到窗口顶部高度
                   //切换导航条的类名为固定后的类名
                   $('.price-nav').addClass('fixer'); 
		   //当导航条的position变成了fixed后，原来的位置会变空，需要在原位置增加个占位div
                   if(!test){
                        var stayPos = document.createElement("div");
		        stayPos.id= "stayPosDiv";
			stayPos.style.height = "38px";//导航条的高度
		        var temp = document.getElementById("nav");
		        temp.appendChild(stayPos);
		        test=true;
		    }
                }else{
                      //如果回到导航条原位置之前则替换回原来的类名
                      $('.price-nav').removeClass('fixer');
		      if(test){//移除占位div
			       var temp = document.getElementById("nav");
			       temp.removeChild(stayPosDiv);
			       test = false;
		      }
               }   
          });
</script>

            通过这个js配合我们的css.就可以实现导航栏在页面滑动到一定的高度之后，固定在顶部的效果。