网页上下滑动顶部导航栏以及文字改变颜色

顶部固定导航栏随页面滚动颜色发生改变

一、代码部分

1. 引入jQuery

   <script src="js/jquery.min.js"></script>

2. HTML部分 

   <div class="header">
   	<span class="nav">顶部导航栏</span>
   </div>
   <div class="pink">
   </div>
   <div class="blue">
   </div>

3. CSS部分 

   <style>
   			* {
   				margin: 0;
   				padding: 0;
   			}
   
   			.header {
   				position: fixed;
   				top: 0px;
   				width: 100%;
   				height: 80px;
   				background-color: transparent;
   				box-shadow: 0px 0px 7px #0000002a;
   				text-align: center;
   			}
   
   			.header .nav {
   				font-size: 30px;
   				line-height: 80px;
   				color: white;
   			}
   
   			.pink {
   				width: 100%;
   				height: 500px;
   				background-color: pink;
   			}
   
   			.blue {
   				width: 100%;
   				height: 500px;
   				background-color: skyblue;
   			}
   </style>

4. JS部分 

   function scroll() {
   				var header = document.querySelector('.header');
   				var nav = document.querySelector('.nav');
   				var top = $(".pink").offset().top;
   				var scrollTop = $(window).scrollTop();
   				if (scrollTop > top) {
   					header.style.backgroundColor = 'white';
   					nav.style.color = 'black';
   				} else {
   					header.style.backgroundColor = 'transparent';
   					nav.style.color = 'white';
   				}
   			}
   			$(window).on('scroll', function() {
   				scroll()
   			});

二、效果展示 

1. 滚动前
2. 滚动后