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

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


<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>


你可能感兴趣的:(JQuery)