模仿美丽说浮动导航

最新推荐文章于 2024-05-24 12:36:14 发布

anihasiyou

最新推荐文章于 2024-05-24 12:36:14 发布

阅读量1.4k

点赞数

分类专栏： Web前端/javascript/jQuery 文章标签： css jquery 导航

本文链接：https://blog.csdn.net/anihasiyou/article/details/21514877

版权

Web前端/javascript/jQuery 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

前几天，在qq群里有个朋友提问题，问美丽说的导航怎么做的？遂在百度了一下看一下解决办法。
主要的技术点就是，当屏幕的滚动条距离大于导航距离顶部的高度的时候，让导航条浮动。贴上源代码，兼容IE6+，各主流浏览器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>模仿美丽说导航</title>
<meta name="keywords" content="模仿,导航,浮动导航,css,jquery" />
<meta name="desCription" content="模仿,导航,浮动导航,css,jquery" />
<!--css , js-->

    <style type="text/css">
	*{margin:0px; padding:0px;}
	body{ _background-attachment:fixed; _background-image:url(about:blank);} /*实现ie6不支持fixed方法*/
	#nav{width:100%; height:45px; background-color:#dd4250;}
	#nav ul{width:720px; margin:0px auto;}
	#nav ul li{float:left;
	             list-style-type:none;
				 width:120px;
				 height:45px; text-align:center;line-height:45px;
				 font-size:16px;font-family:"楷体_GB2312","宋体",Arial, Helvetica, sans-serif;}
	#nav ul li a{color:#FFFFFF; text-decoration:none;
	display:block; }
	#nav ul li a:hover{ background-color:#0000FF;}
    #content{height:1800px;background:#d5d5d5;}
	#top{height:100px;}
	.navscroll{position:fixed; top:0px; left:0px;
	_position:absolute;/*兼容ie6*/
	_top: expression(offsetParent.scrollTop);/*兼容IE6*/
	z-index:2;}
	
    </style>


</head>

<body>
<div id="top">我是头部</div>
     <div id="nav">
	     <ul>
		      <li><a href="">导航</a></li>
			  <li><a href="">导航</a></li>
			  <li><a href="">导航</a></li>
			  <li><a href="">导航</a></li>
			  <li><a href="">导航</a></li>
			  <li><a href="">导航</a></li>
		 </ul>
    </div>
 
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
 <script type="text/javascript">
    $(document).ready(function(){
                var topMain=$("#top").height()//是头部的高度加头部与nav导航之间的距离。
                var nav=$("#nav");
                $(window).scroll(function(){//如果滚动条顶部的距离大于topMain则就nav导航就添加类.nav_scroll，否则就移除。
                        ($(window).scrollTop()>topMain)?nav.addClass("navscroll"):nav.removeClass("navscroll");
                });
             })
</script>

<div id="content">
我是内容：利用css和jquery模仿美丽说浮动导航
</div>

</body>
</html>

anihasiyou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模仿美丽说浮动导航

前几天，在qq群里有个朋友提问题，问美丽说的导航怎么做的？遂在百度了一下看一下解决办法。主要的技术点就是，当屏幕的高度大于导航的高度的时候，让导航条浮动。贴上源代码，兼容IE6+，各主流浏览器。模仿美丽说导航 *{margin:0px; padding:0px;} body{ _background-attachment:fixed; _background-
复制链接

扫一扫

专栏目录