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

最新推荐文章于 2023-06-19 13:28:41 发布

树某人

最新推荐文章于 2023-06-19 13:28:41 发布

阅读量863

点赞数

分类专栏：页面布局方面文章标签： html5

本文链接：https://blog.csdn.net/ThroughWeb/article/details/106785292

版权

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

摘要由CSDN通过智能技术生成

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

最低0.47元/天解锁文章

树某人

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
仿淘宝商品详情页顶部nav屏幕滑动出现-商品/详情/评价/分享

项目开发实录将其简化为一个demo方便后续使用简化淘宝顶部的淡入淡出并将其修改为两个不同盒子之间的切换，毕竟实际项目实际操作嘛。下面的代码块为简略版的demo，直接复制粘贴即可实现效果（移动端喔）<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,min
复制链接

扫一扫

专栏目录