移动端的导航栏联动(滚动监听)

背景:

某网上商城(移动端)产品展示页面。

需求:

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

要求: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,这个只能靠自己打开开发者工具,慢慢找了。

祝大家都能越来越厉害,谁要是有更好的办法可以给本菜鸡留言或者发邮件:786810523@qq.com

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页