本文实例讲述了jQuery CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单。分享给大家供大家参考，具体如下：

！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 ' hearta charset=' UTF-8 ' title[推荐】Jquery CSS3仿花瓣网固定顶部位置悬浮的导航菜单/titlestyle type='text/css'body，h1，ul { margin :0 } ul Li { list-style-type : none；} #页眉{宽度：100%；边框-顶部：实心1px # CCC边框-底部：实心1px # CCC文本对齐：居中；} h1 { padd :10 px 0；color: # D74452}。nav { width:1000px背景# fffmargin:20px自动0;border : solid 1px # ccczoom :1 border-radius :5 px；box-shadow:0 1px 6px rgba(0，0，0，0.1)；color: # D74452}。nav _ scroll {位置：固定宽度：100%;余量：0left:0top:0}。nav :在{内容： }之后；显示：块；高度：0;clear:both可见性：隐藏；}.nav ul Li { float : leftmargin :0 20px高度：30 px线高：30 px}.导航ul阿利{光标：指针指针；}.导航ul阿利：悬停{文本装饰：下划线；} h2 { height:400px线高：400 px}/style脚本src=' http : jquery-1。7 .2 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(文档)。ready(function(){ var topMain=$(' # header ')).高度()20//是头部的高度加头部与航行导航之间的距离var nav=$(' .nav’)；$(窗口)。滚动（函数(){ if ($(window)).scrollTop()topMain){//如果滚动条顶部的距离大于topMain则就航行导航就添加类。导航滚动，否则就移除导航。add CLaSS(' nav _ scroll ')；} else { nav。移除类(' nav _ scroll ')；} });})/script/header dydiv id=' header ' h1花瓣/h1/divdiv class='nav' ul lia关注/a/li lia最新/a/li lia最热/a/li lia视频/a/li lia家居/a/li lia旅行/a/Li/ul/div style='背景： # f9f 9 f 9color : # 000 ' id=' cont ' h21/H2 h22/H2 h23/H2 h24/H2 h25/H2 h26/H2 h27/H2 h28/H2 h21/H2 h22/H2 h23/H2 h24/H2 h25/H2 h26/H2 h27/H2 h28/H2 h21/H2 h22/H2 h23/H2 h24/H2 h25/H2 h26/H2 h27/H2 h28/H2 h21/H2 h22/H2 h23/H2 h24运行效果图如下：

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript切换特效与技巧总结》 、 《JavaScript遍历算法与技巧总结》 、 《JavaScript查找算法技巧总结》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。