jQuery实现固定在网页顶部的菜单效果代码

本文实例讲述了jQuery实现固定在网页顶部的菜单效果代码。分享给大家供大家参考。具体如下：

这是一款基于jQuery的固定在页面顶部的菜单，获取要定位元素距离浏览器顶部的距离，滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-top-fixed-menu-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title固定在顶部的菜单/title脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js/script脚本类型=' text/JavaScript ' $(function(){//获取要定位元素距离浏览器顶部的距离var navH=$(' .nav ').偏移量()。顶部；//滚动条事件$(窗口)。滚动（函数(){ //获取滚动条的滑动距离var scrolh=$(this).滚动顶部()；//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定if(CroH=NavH){ $(' .nav ').css({'position':'fixed '，' top':0，' left':'50% '，' margin-left ' : '-200px ' })；} else if(scrolhnavah){ $(' .nav ').CSS({“位置”:“静态”、“边距”:“0自动”})；}控制台。log(scrolh==NavH)；})})/脚本样式类型=' text/CSS ' * { margin 33600 px；padding:0px }。顶部{ height:900px背景技术： # 009999;}.nav { width :400 pxmargin :0 auto边框-底部：1px实心# F00}。nav ul :在{ clear :两者之后；内容： " "；display:table}。nav ul Li {背景： # FFFFFFfloat:left宽度：70 pxborder:2px实心# 06F文本对齐：居中；高度：28 px行高：28 px列表式：无；} .cl01、cl02、cl03、cl04、cl05、cl06、cl07、cl08 { height :300 px } . cl01 { background : # 333 } . cl02 { background : # F00 } . cl03 { background : # FFFF00 } . cl04 { background : # 0FF } . cl05 { background : # 030 } . cl06 { background : # 006699 } . cl07 { background 3: }。 969 }/style/head dydiv class=' top '/div class=' nav ' ul Li测试1/李莉测试2/李莉测试3/李莉测试4/Li/ul/div class=' cl01 '/div class=' cl02 '/div class=' cl03 '/div class=' cl04 '/div class=' cl05 '/div class=' cl06 '/div class=' cl07 '/div class=' cl08 '/div/body/html希望本文所述对大家的jquery程序设计有所帮助。