jQuery实现仿百度帖吧头部固定导航效果

本文实例讲述了jQuery实现仿百度帖吧头部固定导航效果。分享给大家供大家参考。具体如下：

这里使用jquery实现网页上的头部固定，但不随滚动条滚动的效果，在百度贴吧里整理出来的网页特效，最开始的时候，固定条可以随滚动条拖动至网页顶部，但到达网页顶部后，再次拖动滚动条，头部并不滚动，其它的内容可以滚动，貌似在网上见的挺多的效果。

运行效果截图如下：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title导航固定/title脚本src=' http : jquery-1。6 .2 .量滴js ' language=' JavaScript ' type=' text/JavaScript '/script script $(function(){ $(window)).滚动(函数(){ //$('body ')).CSS({ '背景-位置' : '中心' $(窗口)。scroll ToP()' ' })；if($(窗口)。scrollTop()=250){ $(' .nav ').添加类(' FixedNav ')；}else{ $(' .nav ').移除类(' FixedNav ')；} });});/script style * { margin 33600 px；padding:0px }分区。nav {背景： # 000000；高度：57 px线高：57 pxcolor: # ffffff文本对齐：居中；字体系列： '微软雅黑', '黑体；font-size :30 px} div。FixedNav {位置：固定；top:0pxleft:0px宽度：100%;z指数：100000;_ position : absolute _ top :表达式(eval(文档。文档元素。滚动顶部))；}/style/head body div class=' header ' style=' background : # CCCC00；高度：250 px/divdiv class='nav'p导航固定/p/div div class=' content ' style=' background : # 0099 ff；height :2000 px '/div/body/html希望本文所述对大家的jquery程序设计有所帮助。