仿淘宝商品详情页顶部nav屏幕滑动出现-商品/详情/评价/分享

项目开发实录 将其简化为一个demo方便后续使用
简化淘宝顶部的淡入淡出并将其修改为两个不同盒子之间的切换，毕竟实际项目实际操作嘛。
下面的代码块为简略版的demo，直接复制粘贴即可实现效果（移动端喔）
后续会有另外一种解决办法

	
		
		
		
		
	
	
		

			
返回
			
商品
			
详情
			
评价
			
分享
		
		

			
返回
			
我要分享
		
		

			

				

				

					
10
					
10
					
10
					
10
					
10
					
10
					
10
					
10
					
10
					
10
					
10
				
			
			

				

			
		
	

个人在项目实现过程中发现onscroll事件在移动端无法触发，又急着解决当前的问题，保留了onscroll的操作并查找新方法的途中，了解到了touch事件。touch方法详解如下：

touchstart：触摸开始，多点触控，也就意味着当手指放在屏幕上的时候，就已经触发了这个事件
touchmove：接触点改变，滑动时，直白讲就是手指动的过程，并未松开手指
touchend：触摸结束，手指离开屏幕时，想必这个就不用赘述了叭

以下方案仅供参考，根据个人的实际情况来进行操作，我这里的情况是在三个touch事件下判断滚动条距离顶部的距离都为0的时候，选择了判断顶部fixed固定好的header下的第一个盒子（个人命名为saveScroll）到顶部的距离，原理十分简单，当手指滑动屏幕时必然触发touchstart事件，从而会改变saveScroll盒子到顶部的距离，判断该距离小于顶部fixed的header的时候，将本来隐藏的盒子展示出来，等于或者大于该距离的时候，隐藏掉即可（手指划手机必然会涉及到一直下拉，也就是为什么会大于该距离的原因），以下是实际操作时的代码

//移动端上下划动屏幕改变顶部nav展示状态
		$(".saveScroll")[0].addEventListener('touchmove',function(e){
			//emmm，仍在研究这个preventDefault的作用
			e.preventDefault()
			//赋值确定原先距离顶部的高度
			var scrollTop = $(".saveScroll").offset().top
			//根据不同的rem比例确定顶部固定的header的高度
			var header_height = $(".header_height").height()
			//进行判断并改变显示隐藏状态
			if(scrollTop < header_height){
				$(".hide_container").hide()
				$(".show_container").show()
			}else{
				$(".hide_container").show()
				$(".show_container").hide()
			}
		})

欢迎指导~
一起学习进步呀~