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

原创

于 2020-06-16 13:48:16 发布 · 969 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html5

本文记录了一个项目开发中仿造淘宝商品详情页顶部nav的实现过程，简化为一个移动端Demo。在实际操作中遇到onscroll事件在移动端不触发的问题，转而采用touch事件。通过监听touch事件，当滑动距离达到一定条件时切换头部导航显示。提供了相关代码示例，适合移动端场景。

项目开发实录将其简化为一个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;