实现滚动到一定位置，导航栏固定到顶部且有动画

最新推荐文章于 2022-04-12 13:52:34 发布

AndyPoplar

最新推荐文章于 2022-04-12 13:52:34 发布

阅读量793

点赞数 1

文章标签：前端导航固定

本文链接：https://blog.csdn.net/weixin_44194732/article/details/98587109

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这个动画是用透明度做的，欢迎小伙伴们交流其他的做法哟
直接上代码，
但是感觉这个透明度变化还是有点不舒服，欢迎老哥们指点。
别忘了引用jq文件哦~~~~

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
			*{
				margin: 0;
				padding: 0;	
			}
			
			.header{
					width: 100%;
					height: 220px;
					background: lightblue;
					color: yellow;
					font-weight: bold;
					font-size: 25px;
					text-align: center;
					line-height: 220px;
				}
			
			.nav{
					width: 100%;
					height: 80px;
					background: green;
					color: greenyellow;
					font-weight: bold;
					font-size: 25px;
					text-align: center;
					line-height: 80px;
				}
		
			.content{
					width: 100%;
					height: 1200px;
					background: yellow;
					color: blueviolet;
					font-weight: bold;
					font-size: 25px;
					text-align: center;
					line-height: 1200px;
				}
			
			.footer{
					width: 100%;
					height: 600px;
					background: gray;
					color: red;
					font-weight: bold;
					font-size: 25px;
					text-align: center;
					line-height: 600px;
				}
			
			.fixed{
				z-index: 2000;
				top: 0;
				left: 0;
				position: fixed;
				/*动画保留最后一次执行状态*/
				animation: mymove 3s ease-in-out 0s 1 alternate forwards;
			}
			
			@keyframes mymove{
				from{opacity: 1;}
				to{opacity: 0.5;}
			}
			
		</style>
	</head>
	<body>
		<div class="header">头部</div>
		<div class="nav">列表</div>
		<div class="content">内容</div>
		<div class="footer">尾部</div>
		
		<script src="js/jquery1.7.js"></script>
		<script>
			$(function(){
				
				$(window).scroll(function(){
					
					var height = $(window).scrollTop();
					
					console.log(height);
				
						if (height	>400) {
							$(".nav").addClass("fixed");
						
						}else{
							$(".nav").removeClass("fixed");

						}
				})
			})
		</script>
	</body>
</html>