仿淘宝商品详情页顶部nav屏幕滑动出现-商品/详情/评价/分享
巫懿轩
项目开发实录 将其简化为一个demo方便后续使用
简化淘宝顶部的淡入淡出并将其修改为两个不同盒子之间的切换，毕竟实际项目实际操作嘛。
下面的代码块为简略版的demo，直接复制粘贴即可实现效果（移动端喔）
后续会有另外一种解决办法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>滚动展示</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
header {
width: 100%;
height: 50px;
display: flex;
background-color: skyblue;
position: fixed;
top: 0;
z-index: 2;
}
header li {
flex: 1;
line-height: 50px;
text-align: center;
}
section {
width: 100%;
height: 100%;
}
.one {
width: 100%;
background-color: #90EE90;
overflow-y: hidden;
position: relative;
}
.one ul li {
height: 50px;
}
.one button {
position: absolute;
bottom: 0;
}
.two {
width: 100%;
height: 750px;
background-color: #F08080;
}
.goods-active{
color: red;
}
.message-active{
color: red;
}
.header-active{
display: none;
}
.content-one{
width: 100%;
height: 50px;
display: flex;
background-color: skyblue;
position: fixed;
top: 0;
z-index: 2;
}
.content-one li{
flex: 1;
text-align: center;
line-height: 50px;
}
.content-one-active{
display: none;
}
</style>
</head>
<body>
<header>
<li>返回</li>
<li class="goods">商品</li>
<li class="message">详情</li>
<li>评价</li>
<li>分享</li>
</header>
<div class="content-one">
<li>返回</li>
<li>我要分享</li>
</div>
<section>
<div class="one">
<div style="height: 50px;background-color: #999999;"></div>
<ul>
<li>10</li>
<li>10</li>
<li>10</li>
<li>10</li>
<li>10</li>
<li>10</li>
<li>10</li>
<li>10</li>
<li>10</li>
<li>10</li>
<li>10</li>
</ul>
</div>
<div class="two">
<div style="height: 50px;background-color: #999999;"></div>
</div>
</section>
</body>
</html>
<script type="text/javascript">
var goods = document.getElementsByClassName("goods")[0]
var message = document.getElementsByClassName("message")[0]
var one = document.getElementsByClassName("one")[0]
var header = document.getElementsByTagName("header")[0]
var contentone = document.getElementsByClassName("content-one")[0]
window.onload = function () {
goods.classList.add('goods-active')
header.classList.add('header-active')
}
window.onscroll = function() {
//变量scrollTop是滚动条滚动时，距离顶部的距离
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//判断当滚动条距离顶部的距离大于顶部fixed固定的header之后，样式改变
if(scrollTop > header.offsetHeight){
// header.style.show = true
header.classList.remove('header-active')
}else {
contentone.classList.remove('content-one-active')
}
//具体商品和详情的切换实现如下
if (scrollTop > one.offsetHeight) {
message.classList.add('message-active')
goods.classList.remove('goods-active')
} else {
goods.classList.add('goods-active')
message.classList.remove('message-active')
}
}
</script>
个人在项目实现过程中发现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()
}
})
欢迎指导~
一起学习进步呀~
类似资料：