运用jquery实现简单的顶部导航栏固定

最新推荐文章于 2023-05-15 16:30:14 发布

web 沐

最新推荐文章于 2023-05-15 16:30:14 发布

阅读量1.1k

点赞数

文章标签： jquery JS HTML WEB

本文链接：https://blog.csdn.net/weixin_45582846/article/details/100172757

版权

运用jquery实现简单的顶部导航栏固定

以下是html代码：

<!DOCTYPE html>
<html>
 <head>
  <title>回到顶部</title>
  <link rel="stylesheet" type="text/css" href="style/index.css" />
  <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
 </head>
 <body>

   <div class="header"></div>
   <div class="nav">
    <p>导航固定</p>
   </div>
   <div class="content"></div>

 </body>
</html>

以下是css代码：

*{margin:0;}
div.header{
	background:#CCCC00;
	height:250px;
}
div.nav{
	width:100%; height:57px;
	background:#000000;
	line-height:57px;
	color:#ffffff;
	text-align:center;
	font-size:30px;
    font-family: YouYuan;
}
div.content{
	background:#0099FF;
	height:2000px;
}

以下是js代码：

$(function(){
	$(window).scroll(function(){
		var h_header = $("div.header").height();
		if($(window).scrollTop()>=h_header){
			$(".nav").css("position","fixed").css("top","0");
        }else{
        	$(".nav").css("position","static");
        }
    });
})

如有问题或者疑问就留言联系小编！！！！

web 沐

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
运用jquery实现简单的顶部导航栏固定

运用jquery实现简单的顶部导航栏固定以下是html代码：<!DOCTYPE html><html> <head> <title>回到顶部</title> <link rel="stylesheet" type="text/css" href="style/index.css" /> <script...
复制链接

扫一扫