移动端的导航栏联动（滚动监听）

背景：

某网上商城（移动端）产品展示页面。

需求：

在导航栏上有多个导航链接，分别对应主体内容中的某个部分。

要求：1）通过单击完成页面内容的滚动定位。

   2）用户通过浏览器滚动页面时，到达相应的位置，需要将对应的导航标志选中样式。

问题：

1）是否可以使用bootstrap提供的滚动监听？

回答：可以的，同时需要修改原本样式的可能性非常大。

2）为何没有使用bootstrap提供的滚动监听？

回答：

一，主要原因是bootstrap提供的滚动监听使用的是<a>的href="#XXX"属性，当点击导航链接后会在url上出现“#”，

同时，由于我需要用url来发起get请求，需要拆分参数，这样比较麻烦；

       二，另一个比较重要的原因是，bootstrap提供的滚动监听的定位，是以窗口或是滚动对象为基础的（这里可能不太正确），

由于页面上方存在两个固定的div，一个是头，一个是导航栏，那么我们需要显示的东东，单击导航定位后，极有可能会被这两个

坏蜀黍挡住！同样，当我们滑动屏幕时，由于定位的是目标元素到窗口顶部的距离为0，反正我是被挡的没办法了。

上图：

代码：

首先在样式上，需要一点小技巧

margin-top: -85px;
padding-top: 95px;

就是这两个，主要就是解决显示的时候不要被上面的两个固定块挡住，以及定位后为与顶部预留出空白。

调好样式，接下来上顶部两个怪蜀黍的html

	<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
		<div class="container">
			<div class="container-fluid">
		    	<div class="navbar-header">
		      	<!-- <a class="nav-item-right" href="javascript:void(0)" onclick="back()">
		        		<span class="glyphicon glyphicon glyphicon-share"></span>
		      		</a>
		      		<a class="nav-item-left" href="javascript:void(0)" onclick="share()">
		        		<span class="glyphicon glyphicon-chevron-left"></span>
		      		</a> -->	
		      		<div class="nav-item-center">
			      		<span class="company-name">XX产品</span>
		      		</div>
		    	</div>
			</div>
		</div>
	</nav>
	<!-- 产品导航 -->
	<div class="leader-bar navbar-fixed-top" id="leader_bar">
		<ul class="leader-base col-sm-12 col-xs-12 ">
			<li class="leader-menu col-sm-4 col-xs-4">
				<a class="leader-menu1 leader-menu-list" onclick="AA($(this))">产品介绍</a></li>
			<li class="leader-menu leader-center col-sm-4 col-xs-4">
				<a class="leader-menu2 leader-menu-list" onclick="BB($(this))">商家认证</a></li>
			<li class="leader-menu col-sm-4 col-xs-4">
				<a class="leader-menu3 leader-menu-list" onclick="CC($(this))">客户评价</a></li>
		</ul>
	</div>

可以看到上面的这两个div是bootstrap提供的顶部类样式效果

	.navbar-fixed-top

，那么第二个div只要在最外层添加margin-top就可以为第一个div留出位置。

我们再看，在导航的3个链接中，我并没有使用<a>标签提供的href属性来定位，我是为这个标签绑定了各自的方法。

这里提一句，大家有时候看到一个导航栏是在页面中间的某个位置的，当我们浏览到了那个位置，再往下拉的时候，

这个导航栏会固定在窗口顶部，跟着我们一起下拉，这个也可以用类似我们下面要说的定位来做，只是我们需要两个导航

栏，一个就是我贴出来的位置（这种情况下它应该是隐藏的），另一个就是在页面中间的某个位置（这种情况它肯定是显示的），

当我们监听到页面下拉到某个位置的时候，就要将这两个导航栏切换显示，这样就达到了看似导航栏跟着走的效果。

ps:这是我猜的……当然我也这么做过……

我们开始做滚动监听

//窗口上下滑动的浏览监听，用于导航栏的关联样式切换
	$(window).scroll(function(event){
		//当前距离顶部位置
		var winPos = $(window).scrollTop();
		//产品宣传图片高度
		var ads_height = $('#productIntroduction').outerHeight(true);
		//产品介绍图片高度
		var introduce_img_height = $('#productIntroductImgs').outerHeight(true);
		//商家认证部分高度
		var introduce_plan_height = $('#productPlans').outerHeight(true);
		//到商家认证之前的总高度
		var a = parseInt(ads_height)+parseInt(introduce_img_height)-90;
		//到客户评价前的总高度
		var b = parseInt(ads_height)+parseInt(introduce_img_height)+parseInt(introduce_plan_height)-105;
		if(winPos<a){
			$('.leader-menu1').css('color','#127ac2');
			$('.leader-menu2').css('color','#757575');
			$('.leader-menu3').css('color','#757575');
		}else if(winPos>=a && winPos<=b){
			$('.leader-menu2').css('color','#127ac2');
			$('.leader-menu1').css('color','#757575');
			$('.leader-menu3').css('color','#757575');
		}else{
			$('.leader-menu3').css('color','#127ac2');
			$('.leader-menu1').css('color','#757575');
			$('.leader-menu2').css('color','#757575');
		}

    });

这里自己根据自己页面结构来进行计算了，当然最好需要打开页面看着进行微调一下。根据这个就可让导航栏跟着跑了。

再提一下吧，监听滚动的高度大于等于或小于某个值的时候，显示/隐藏导航就行了，大家都比较喜欢傻瓜式的嘛。

滚动监听做完了，快试试看是不是可以让你的导航栏跟着切换样式了呢？

接下来我们需要上单击链接的方法了

这里就贴一个，剩下的自己去算吧

function AA(){
	var ads_height = $('#productIntroduction').outerHeight(true);
	var introduce_img_height = $('#productIntroductImgs').outerHeight(true);
	var s = parseInt(ads_height)+parseInt(introduce_img_height)-89;
	$(window).scrollTop(s);
	$('.leader-menu2').css('color','#127ac2');
	$('.leader-menu1').css('color','#757575');
	$('.leader-menu3').css('color','#757575');
}

写在最后：

大家如果按照本文没能做出，原因可能会有很多，其中可能涉及到修改bootstrap的css，这个只能靠自己打开开发者工具，慢慢找了。

祝大家都能越来越厉害，谁要是有更好的办法可以给本菜鸡留言或者发邮件：[e-mail]