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

预览：
代码：
`

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