固定在网页顶部跟随滚动条滑动而滑动的DIV层

最近浏览网页时看到一个比较不错的做法,就是网页的某一块在随浏览器滚动快要消失的时候会浮动在页面上,页面还可以继续往上翻滚,但比较突出的那一块一直贴在浏览器的顶部,比如拖拉网,美丽说的顶部导航条就是这种效果,自我感觉这种效果还是比较贴心的,于是乎自己钻研了下,也写了这样一种效果,现在将代码贴在下面和大家分享。

  1. /* 
  2. *滚动条滑动,位置不变的DIV层 
  3. *div_id:DIV的ID属性值,必填参数 
  4. *offsetTop:滚动条滑动时DIV层距顶部的高度,可选参数 
  5. */ 
  6. function fixDiv(div_id,offsetTop){ 
  7.     var Obj=$('#'+div_id); 
  8.     if(Obj.length!=1){return false;} 
  9.     var offsetTop=arguments[1]?arguments[1]:0; 
  10.     var ObjTop=Obj.offset().top; 
  11.     var isIE6=$.browser.msie && $.browser.version == '6.0'
  12.     if(isIE6){ 
  13.         $(window).scroll(function(){ 
  14.             if($(window).scrollTop()<=ObjTop){ 
  15.                     Obj.css({ 
  16.                         'position':'relative'
  17.                         'top':0 
  18.                     }); 
  19.             }else
  20.                 Obj.css({ 
  21.                     'position':'absolute'
  22.                     'top':$(window).scrollTop()+offsetTop+'px'
  23.                     'z-index':1 
  24.                 }); 
  25.             } 
  26.         }); 
  27.     }else
  28.         $(window).scroll(function(){ 
  29.             if($(window).scrollTop()<=ObjTop){ 
  30.                 Obj.css({ 
  31.                     'position':'relative'
  32.                     'top':0 
  33.                 }); 
  34.             }else
  35.                 Obj.css({ 
  36.                     'position':'fixed'
  37.                     'top':0+offsetTop+'px'
  38.                     'z-index':1 
  39.                 }); 
  40.             } 
  41.         }); 
  42.     } 

请注意使用这个方法之前请先加载 jquery 库文件,具体使用方法如下(比如下面要将页面id属性为test的div达到随滚动条滑动而滑动的效果):

  1. fixDiv('test',5);//顶端浮动并于顶端保持5px的间距 

转载请注明:代码家园 » 固定在网页顶部跟随滚动条滑动而滑动的DIV层

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
  • yanqingqing
    2014-11-04 21:55:21发表

    你好,要加载什么jquery文件呢?急!!!