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脚本类型=' text/JavaScript ' src=' http : jquery-1。7 .2 .量滴js '/script script type=' text/JavaScript ' $(function(){ $(' # wrap ul Li ')).css('width '，760/$('#wrap ul li ').size())；$(窗口)。roll(function(){ var h=$(this)).滚动顶部()2；$('#wrap ').css('top '，h)；});$('#wrap ul li:even ').css('背景'，' #ddd') $('#wrap ul li ').悬停(function(){$(this)).css(“”背景，“# 0f 0”)；}，function(){$(this).css(“”背景',' ');});});/script style type=' text/CSS ' # wrap { position : absolute；top:2pxleft:0px宽度：100%;高度：20 px背景技术# f00 } # wrap ul { list-style : none；宽度宽度：760pxmargin:0汽车划水：0;背景# fff} #缠绕ul li {左侧浮动：文本对齐：居中；} #测试{ height:2000px背景技术# f0fmargin:0划水：0;border:1px纯黑；}/style/head dydiv id=' wrap ' ulli首页/丽丽图片/莉莉新闻/莉莉软件/莉莉图片/莉莉新闻/莉莉软件/莉莉图片/莉莉新闻/莉莉软件/Li/ul/div div id=' test '/div/body/html希望本文所述对大家jQuery程序设计有所帮助。