这篇文章主要介绍了jquery+css3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单,可实现页面向下滑动后导航栏横向悬浮并固定在顶部的功能,涉及jquery事件响应及页面元素属性动态修改相关操作技巧,需要的朋友可以参考下
本文实例讲述了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单。分享给大家供大家参考，具体如下：
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">【推荐】Jquery+CSS3仿花瓣网固定顶部位置悬浮的导航菜单 body,h1,ul{margin:0;}ul li{list-style-type:none;}#header{width:100%;border-top:solid 1px #ccc;border-bottom:solid 1px #ccc;text-align:center;}h1{padding:10px 0;color:#D74452;}.nav{width:1000px;background:#fff;margin:20px auto 0;border:solid 1px #ccc;zoom:1;border-radius:5px;box-shadow:0 1px 6px rgba(0,0,0,0.1);color:#D74452;}.nav_scroll{position:fixed;width:100%;margin:0;left:0;top:0;}.nav:after{content:"";display:block;height:0;clear:both;visibility:hidden;}.nav ul li{float:left;margin:0 20px;height:30px;line-height:30px;}.nav ul li a{cursor:pointer;}.nav ul li a:hover{text-decoration:underline;}h2{height:400px;line-height:400px;}$(document).ready(function(){ var topMain=$("#header").height()+20//是头部的高度加头部与nav导航之间的距离 var nav=$(".nav"); $(window).scroll(function(){ if ($(window).scrollTop()>topMain){//如果滚动条顶部的距离大于topMain则就nav导航就添加类.nav_scroll，否则就移除 nav.addClass("nav_scroll"); }else{ nav.removeClass("nav_scroll"); } });})花瓣
登录后复制 关注 最新 最热 视频 家居 旅行
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
运行效果图如下：
立即学习“前端免费学习笔记（深入）”；
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
jQuery和html5和css3实现圆角无刷新表单带输入验证的功能
JavaScript和html5 canvas如何绘制一个小人的代码
以上就是jQuery和CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2748556.html
