导航随滚动改变样式

最新推荐文章于 2021-04-06 14:47:32 发布

weixin_30569033

最新推荐文章于 2021-04-06 14:47:32 发布

阅读量298

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/qing1304197382/p/10963472.html

版权

<!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>
			</ul>
		</div>
		<div id="text">
			<div style="width:100%;height:500px;background:green;text-align:center;">text1</div>
			<div style="width:100%;height:500px;background:yellow;text-align:center;">text2</div>
			<div style="width:100%;height:500px;background:blue;text-align:center;">text3</div>
		</div>

		<script>
			var navContainer = document.getElementById("nav-container");//获取导航ID
			var navBox = document.getElementById("nav-box");//获取ul的id
			var text = document.getElementById("text");//获取滚动内容的id
			var navBoxChild = navBox.children;//获取导航ul的数量
			var textChild = text.children;//获取内容的数量
			var num = navContainer.offsetTop;//导航距离顶部的高度
			var a = navContainer.offsetHeight;//导航的高度
			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;box-shadow:0 2px 3px -1px #000;';
				} else {
					document.getElementsByClassName('menu')[0].style.cssText = 'position:static;';
				}
				//当导航与相应文档接触的时候自动切换
				//method1
				for (var i = 0; i < navBoxChild.length; i++) {
					if (scrollTop + a >= 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>

　导航固定

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;';
				}
			});

参考原生js实现随着滚动条滚动，导航会自动切换的效果

具体项目参考文件1111.zip

转载于:https://www.cnblogs.com/qing1304197382/p/10963472.html