Navigation with scroll style change

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>随着滚动条滚动的Tab切换</title>
		<style>
			* {
				list-style: none;
				margin: 0;
				padding: 0;
				text-decoration: none;
				font-family: 'Microsoft YaHei';

			}

			li {
				width: 100px;
				height: 50px;
				line-height: 50px;
				float: left;
				border-right: 2px solid #eee;
				text-align: center;
				cursor: pointer;
			}

			ul {
				width: 1200px;
				margin: 0 auto;
			}

			.nav {
				height: 52px;
				width: 100%;
				background: #f5f5f5;
			}

			.nav .cur {
				background: #fff;
				border-top: 2px solid #1a92cf;
				color: #1a92cf;
			}

			.fixed {
				position: fixed;
				top: 0;
				left: 0;
			}

			a {
				color: #505050;
			}
		</style>
	</head>
	<body>
		<div class="nav" id="nav-container">
			<ul class="menu" id="nav-box">`
				<li class="cur">text1-nav</li>
				<li>text2-nav</li>
				<li>text3-nav</li>
			var num = navContainer.offsetTop; // navigation distance of the height of the top
			</ul>
		</ div> 
		<div ID = "text"> 
			<div style = "width: 100%; height: 500px; background: Green; text-align = left: Center;"> text1 </ div> 
			<div style = "width: 100%; height: 500px; background: Yellow; text-align = left: Center; "> text2 </ div> 
			<div style =" width: 100%; height: 500px; background: Blue; text-align = left: Center; "> text3 </ div> 
		</ div> 

		<Script> 
			var navContainer = document.getElementById ( "NAV-Container"); // Get the navigation ID 
			var navBox = document.getElementById ( "NAV-Box"); // Get ul of id 
			var text = document.getElementById ( "text"); // get id scrolling content 
			var navBoxChild = navBox.children; // get the number of navigation ul 
			var textChild = text.children;// Get the number of contents 
			var a = navContainer.offsetHeight; // height navigation 
			window.onscroll = function () { 
				var scrollTop document.documentElement.scrollTop || = || window.pageYOffset document.body.scrollTop; 
				IF (scrollTop> = NUM) { 
					document.getElementsByClassName ( 'MENU') [ 0] .style.cssText = 'position: Fixed; Top: 0px; background: # 000; Shadow Box-: 0 2px 3px -1px # 000;'; 
				} the else { 
					document.getElementsByClassName ( 'MENU') [0]. = style.cssText 'position: static;'; 
				} 
				// when navigation contact with the corresponding document is automatically switched when 
				// the method1 
				for (var I = 0; I <navBoxChild.length; I ++) { 
					iF (a scrollTop +> = textChild [I] .offsetTop) { 
						for (var J = 0; J <navBoxChild.length; J ++) { 
							navBoxChild [J] .className = "";
						} 
						navBoxChild [I] .className = "CUR";
					}
				}
			};
			for (var i = 0; i < navBoxChild.length; i++) {
				var interval;
				navBoxChild[i].index = i;
				navBoxChild[i].onclick = function() {
					var self = this;
					clearInterval(interval);
					interval = setInterval(function() {
						if (document.body.scrollTop + a <= textChild[self.index].offsetTop) {
							document.body.scrollTop += 40;
							if (document.body.scrollTop + a >= textChild[self.index].offsetTop) {
								document.body.scrollTop = textChild[self.index].offsetTop - a;
								clearInterval(interval);
							}
						} else {
							document.body.scrollTop /= 1.1;
							if (document.body.scrollTop + a <= textChild[self.index].offsetTop) {
								document.body.scrollTop = textChild[self.index].offsetTop - a;
								clearInterval(interval);
							}
						}
					}, 40);
				};
			}
		</script>
	</body>
</html>

　Fixed navigation

var o = document.getElementById("activity");
			var h = o.offsetHeight; //高度
			var w = o.offsetWidth; //宽度
			console.log(h)
			document.addEventListener('scroll', function (event) { 
				var scrollDistance = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				if (scrollDistance >= h-95) {    // 触发的位置
					document.getElementsByClassName('menu')[0].style.cssText = 'position:fixed;top:0px;background: #000;box-shadow:0 2px 3px -1px #000;';
				} else {
					document.getElementsByClassName('menu')[0].style.cssText = 'position:static;';
				}
			});

Reference Native js implemented with the scroll bar to scroll, will automatically switch the navigation effect

Navigation with scroll style change

Guess you like