交互式H5导航栏：滑动高亮、吸顶、锚点导航

简效

已于 2024-07-03 16:31:12 修改

阅读量551

点赞数 5

文章标签： javascript 前端 css

于 2024-07-03 16:25:07 首次发布

本文链接：https://blog.csdn.net/wordcsd/article/details/140155646

版权

项目需要i，在此记录

代码截图：随意写的样式。自行修改。

全部代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>产品</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			img {
				max-width: 100%;
			}
			
			a {
				color: #333;
				text-decoration: none;
			}
			
			body {
				color: #333;
				font-size: 0.32rem;
			}
			
			.sticky-nav {
				display: none;
				background-color: #333;
				color: white;
				top: 0;
				z-index: 10;
				overflow: auto;
				white-space: nowrap;
			}
			.sticky-nav.fixed{
				display: block;
				position: sticky;
			}
			.sticky-nav span{
				display: inline-block;
				padding: 0.2rem 0.1rem;
				margin: 0 0.1rem;
				letter-spacing: 1px;
			}
			.sticky-nav span.active{
				border-bottom: 2px solid red;
			}
		</style>
	</head>
	<body>
		<div style="height: 200px;">内容</div>
		<div class="wrap">
			<div class="sticky-nav">
				<span data-target="#sc1" class="active">保障计划</span>
				<span data-target="#sc2">产品介绍</span>
				<span data-target="#sc3">投保须知</span>
				<span data-target="#sc4">保险条款</span>
				<span data-target="#sc5">理赔须知</span>
			</div>
			<div style="height: 800px;background-color: green;" id="sc1">保障计划</div>
			<div style="height: 800px;background-color: chocolate;" id="sc2">产品介绍</div>
			<div style="height: 800px;background-color: aqua;" id="sc3">投保须知</div>
			<div style="height: 800px;background-color: aqua;" id="sc4">保险条款</div>
			<div style="height: 800px;background-color: aqua;" id="sc5">理赔须知</div>
		</div>

		
		<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
		<script>
			(function(doc, win) {  //此处为rem的js,不使用rem可以不要
				var docEl = doc.documentElement,
					resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
					recalc = function() {
						var clientWidth = docEl.clientWidth;
						if (!clientWidth) return;
						if (clientWidth >= 640) {
							docEl.style.fontSize = '100px';
						} else {
							docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
						}
						document.getElementsByTagName('body')[0].style.display = "block"
					};
				if (!doc.addEventListener) return;
				win.addEventListener(resizeEvt, recalc, false);
				doc.addEventListener('DOMContentLoaded', recalc, false);
			})(document, window);
			
			$(document).ready(function() {
				var $navItems = $('.sticky-nav span');
				var $scrollSections = $('#sc1, #sc2, #sc3, #sc4, #sc5');

				function updateActiveNavItem() {  //滚动时为相应按钮添加class
					var scrollTop = $(window).scrollTop()+$(".sticky-nav.fixed").height()+1;
					var $activeItem = null;

					$scrollSections.each(function() {
						var $this = $(this);
						if ($this.position().top <= scrollTop) {
							$activeItem = $navItems.filter('[data-target="#' + $this.attr('id') + '"]');
						}
					});

					if ($activeItem) {
						$navItems.removeClass('active');
						$activeItem.addClass('active');
					}
				}

				function updateStickyNav() {  //滚动到一定位置才展示导航
					var long = $('#sc1').offset().top - $(window).scrollTop();
					if (long <= $(".sticky-nav.fixed").height() + 1) {
						$('.sticky-nav').addClass('fixed');
					} else {
						$('.sticky-nav').removeClass('fixed');
					}
				}

				function throttle(func, limit) {  //节流
					var lastFunc;
					var lastRan;
					var context = this;
					var args = arguments;
					if (!lastRan) {
						func.apply(context, args);
						lastRan = Date.now();
					} else {
						clearTimeout(lastFunc);
						lastFunc = setTimeout(function() {
							if ((Date.now() - lastRan) >= limit) {
								func.apply(context, args);
								lastRan = Date.now();
							}
						}, limit - (Date.now() - lastRan));
					}
				}

				updateActiveNavItem();
				$(window).scroll(function() {
					throttle(updateActiveNavItem, 2000);
					throttle(updateStickyNav, 2000);
				});

				$navItems.click(function(e) {  //点击跳转到对应位置
					e.preventDefault();
					var targetId = $(this).attr('data-target').substring(1);
					var targetOffset = $('#' + targetId).offset().top - $(".sticky-nav.fixed").height();
					$('html, body').animate({
						scrollTop: targetOffset
					}, 300);
				});
			});
		</script>
	</body>
</html>