京东页面(黏性定位的实现)
前言:
本文章将分享一些我这周在制作京东页面的实现部分,页面表面大体和京东页面差不多,在里面加了一点script,但是很容易理解,希望大家看到可以有所收获,如果我有哪部分写的不太好,欢迎大家来跟我交流!
🥰个人主页:心.c
🥳文章专题:京东页面制作
🙈欢迎大家点赞❤️收藏💞
京东
关于这个页面,我想分享一下页面中头部的黏性定位,这个定位实现是我自己写的,关于script是本人在AL上搜的,希望可以对大家有帮助,大家有不清楚的地方都欢迎随时来问我.
HTML
下面HTML代码中是视频中关于鼠标滚动时出现的头部搜索区域和头部导航区域,
大致就是当页面高度达到一定位置时,头部的黏性定位就会弹出来,然后加上一些动画(animation),设置时间和位置就可以更加自然的显示出来
<!-- 设置黏性定位区域 --><div class="noface-search" id="stickyElement"><div class="wrapper"><div class="init-logo"><img src="./images/logo2.png" alt=""></div><div class="init-search"><div class="search-box"><input type="text" placeholder="请输入关键字"><div class="photo-btn"><span class="iconfont icon-xiangji"></span></div><div class="search-btn"><span class="iconfont icon-sousuo"></span></div></div><div class="cart"><i class="iconfont icon-gouwu"></i><a href="#">我的购物车</a><div><span>0</span></div></div></div></div></div><!-- 设置黏性导航区域 --><div class="noface-nav" id="stickyElement1"><div class="wrapper"><div class="content_nav"><ul><li class="active"><a href="#"><div><h3>精选</h3></div><span>猜你喜欢</span></a></li><div class="thread"></div><li class="normal"><a href="#"><h3>智能先锋</h3><span>大电器械</span></a></li><div class="thread"></div><li class="normal"><a href="#"><h3>居家优品</h3><span>品质生活</span></a></li><div class="thread"></div><li class="normal"><a href="#"><h3>超市百货</h3><span>百货生鲜</span></a></li><div class="thread"></div><li class="normal"><a href="#"><h3>时尚达人</h3><span>美妆穿搭</span></a></li><div class="thread"></div><li class="normal"><a href="#"><h3>进口好物</h3><span>京东国际</span></a></li></ul></div></div></div>
CSS
关于顶部导航区域的css样式和下面content导航中的css共用的一个,也因为css样式几乎完全一样就多了个黏性碰撞,没有其他什么变化,所以这里就不展示了;关于下面的css样式,大家可以参考,如果有什么问题可以私信我
.wrapper {margin: 0 auto;width: 1190px;
}/* 设置黏性搜索区域 */
.noface-search {padding: 0 20px;height: 51px;background-color: #ffffff;position: -webkit-sticky;position: sticky;top: 0px;/* 距离顶部的距离 */border-bottom: 3px solid #e22525;z-index: 300;/* 确保粘性元素在其他内容上方 */display: none;/* 初始隐藏 */animation: ease1 0.8s ease;
}.noface-search .init-logo img {height: 48px;width: 125px;background-size: cover;
}@keyframes ease1 {from {transform: translateY(-50px);}to {transform: translateY(0px);}
}.noface-search .wrapper {display: flex;}.init-search {margin-top: 7px;padding-left: 150px;display: flex;
}.init-search .search-box {position: relative;display: flex;width: 487px;height: 36px;border: 2px solid #e53232;margin-right: 30px;
}.init-search .search-box input {flex: 1;border: 0;background-color: transparent;outline: none;padding-left: 15px;
}.init-search .search-box input::placeholder {font-size: 12px;color: #c0c0c0;
}.init-search .photo-btn .iconfont {position: absolute;left: 388px;top: -8px;font-size: 30px;color: #c4c4c4;cursor: pointer;
}.init-search search-box {position: relative;display: flex;width: 487px;height: 30px;border: 2px solid #cb5050;margin-right: 20px;
}.init-search .search-box input {flex: 1;border: 0;background-color: transparent;outline: none;padding-left: 15px;
}.init-search .search-box input::placeholder {font-size: 12px;color: #c0c0c0;
}.init-search .photo-btn .iconfont {position: absolute;left: 388px;top: -8px;font-size: 30px;color: #c4c4c4;cursor: pointer;
}.init-search .search-box .search-btn {text-align: right;right: -58px;width: 58px;background-color: #cb5050;text-align: center;cursor: pointer;
}.init-search .search-btn .iconfont {color: #ffffff;font-size: 30px;line-height: 32px;
}.init-search .cart {position: relative;width: 131px;height: 36px;border: #e9e9e9 1px solid;line-height: 32px;text-align: center;
}.init-search .cart .iconfont {font-size: 30px;color: #cb5050;vertical-align: middle;
}.init-search .cart a {font-size: 11px;color: #cb5050;
}.init-search .cart div {padding: 1px 5px;position: absolute;top: 2px;left: 33px;height: 13px;border-radius: 7px;background-color: #cb5050;}.init-search .cart div span {display: block;margin-top: -10px;color: #fff;font-size: 8px;
}/* 设置黏性导航区域 */
.noface-nav {padding: 0 20px;height: 61px;background-color: #ffffff;position: -webkit-sticky;position: sticky;top: 51px;/* 距离顶部的距离 */z-index: 233;/* 确保粘性元素在其他内容上方 */display: none;/* 初始隐藏 */animation: change 0.7s ease;
}@keyframes change {from {transform: translateY(-54px);}to {transform: translateY(0px);}
}
script
这个是我自己直接引入修改了高度,如果大家有更加合适的当然可以
<script>window.onscroll = function () { scrollFunction() };function scrollFunction() {// 当滚动高度大于等于500像素时显示粘性元素,否则隐藏if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {document.getElementById("stickyElement").style.display = "block";} else {document.getElementById("stickyElement").style.display = "none";}if (document.body.scrollTop > 900 || document.documentElement.scrollTop > 900) {document.getElementById("stickyElement1").style.display = "block";} else {document.getElementById("stickyElement1").style.display = "none";}}</script>
到这里我的分享就结束了,如果大家想要了解更多或者想要小编的源码,都可以在评论区里面私信我哦! 欢迎大家和我一起探讨 ! ! !

相关文章:
京东页面(黏性定位的实现)
前言: 本文章将分享一些我这周在制作京东页面的实现部分,页面表面大体和京东页面差不多,在里面加了一点script,但是很容易理解,希望大家看到可以有所收获,如果我有哪部分写的不太好,欢迎大家来跟我交流! 🥰个人主页:心.c 🥳文章专题:京东页面制作 &#…...
【北京迅为】《iTOP-3588从零搭建ubuntu环境手册》-第6章 安装Samba
RK3588是一款低功耗、高性能的处理器,适用于基于arm的PC和Edge计算设备、个人移动互联网设备等数字多媒体应用,RK3588支持8K视频编解码,内置GPU可以完全兼容OpenGLES 1.1、2.0和3.2。RK3588引入了新一代完全基于硬件的最大4800万像素ISP&…...
json-server 模拟接口服务
前端开发经常需要模拟接口请求,可以通过 json-server 实现。 1. 安装 json-server 在前端项目的终端命令行中执行 npm i json-server2. 创建数据源 在项目中新建文件 db.json ,与 package.json 同级,内容为模拟的数据 注意 json 文件对格式…...
pycharm 将项目连同库一起打包及虚拟环境的使用
目录 一、创建虚拟环境 1、用 anaconda 创建 2、Pycharm 直接创建 二、虚拟环境安装第三方库 1、创建项目后,启动终端(Alt F12),或者点击下方标记处。 2、使用 pip 或者 conda 来进行三方库的安装或卸载 3、将项目中的库放入文档,便于…...
GO语言核心30讲 实战与应用 (第三部分)
原站地址:Go语言核心36讲_Golang_Go语言-极客时间 一、io包中的接口和工具 1. strings.Builder、strings.Reader 和 bytes.Buffer 这些类型实现了 io 包的很多接口,目的是什么? 是为了提高不同程序实体之间的互操作性。 程序实体是指比如网…...
HttpServletRequest对象
1.作用 主要作用是用来接收客户端发送过来的请求信息,由servlet容器封装好传递给service()方法 2.常用方法 常用方法描述StringBuffer getRequestURL()获取客户端发送请求时的完整URLString getRequestURI()获取请求行中的资源名称部分(项目名称开始&…...
Linux入门攻坚——23、DNS和BIND基础入门1
DNS——Domain Name Service,协议(C/S,53/udp,53/tcp) BIND——Berkeley Internet Name Domain,ISC(www.isc.org) 互联网络上主机之间的通信依靠的是IP,而人或程序一般使…...
springboot中mybatisplus注意事项
使用代码生成工具CodeGenerator 需要修改的内容 dsc.setUsername(“root”); mysql账号dsc.setPassword(“root”); mysql密码strategy.setInclude(“crm_edu”); 表名pc.setModuleName(“eduservice”); //模块名 package com.test.demo;import com.baomidou.mybatisplus.a…...
Android Ant编译环境配置(Win)
1、 载ant包: 2、设置环境变量: 3、检查是否设置成功及版本 4、执行命令: android update project -p . -n “projectname”(例如:android update project --target 1 -p . -n “Couplet”)(只输入红色部分也是可以的…...
条件变量解决同步问题之打印金鱼
说明 本代码为jyy老师上课演示条件变量解决同步问题示例(本人只做记录与分享) 本人未使用老师封装的POSIX线程库, 直接在单文件中调试并注释 问题描述 有三类线程 T1 若干: 死循环打印< T2 若干: 死循环打印> T3 若干: 死循环打印_ 任务: 对线程同步,使得屏幕…...
10分钟了解Golang泛型
泛型是Golang在1.18版本引入的强大工具,能够帮助我们在合适的场合实现简洁、可读、可维护的代码。原文: Go Generics: Everything You Need To Know 导言 可能有人会觉得Go泛型很难,因此想要借鉴其他语言(比如Java、NodeJS)的泛型…...
鸿蒙内核源码分析(Shell解析篇) | 应用窥视内核的窗口
系列篇从内核视角用一句话概括shell的底层实现为:两个任务,三个阶段。其本质是独立进程,因而划到进程管理模块。每次创建shell进程都会再创建两个任务。 客户端任务(ShellEntry): 负责接受来自终端(控制台)敲入的一个个字符&…...
TypeScript在前端项目的渐进式采用策略
渐进式采用 TypeScript 在前端项目中的策略通常包括: 引入TypeScript 如果我们有一个简单的JavaScript模块utils.js,它包含一个函数用于计算两数之和: // utils.js export function add(a, b) {return a b; }首先,我们将文件扩展名改为.t…...
C++容器常用集合(附传送门)
C常用的容器: string容器 C容器——string-CSDN博客 储存字符串的 vector容器 C容器——vector-CSDN博客 向量是动态数组,可以自动扩展以容纳更多元素。 插入和删除元素的时间复杂度取决于操作的位置 tuple容器(元组) C容器…...
基于springboot的校园资料分享平台源码数据库
基于springboot的校园资料分享平台源码数据库 随着信息互联网购物的飞速发展,国内放开了自媒体的政策,一般企业都开始开发属于自己内容分发平台的网站。本文介绍了校园资料分享平台的开发全过程。通过分析企业对于校园资料分享平台的需求,创…...
卷积神经网络(CNN)
大家好,这里是七七,今天来更新关于CNN相关的内容同了。本文是针对CNN原理的说明,但对于小白不是非常友好,建议先掌握神经网络相应知识再进行阅读哦。 一、卷积与互相关 卷积 卷积运算是对两个函数进行的一种数学运算,…...
Linux入门攻坚——22、通信安全基础知识及openssl、CA证书
Linux系统常用的加解密工具:OpenSSL,gpg(是pgp的实现) 加密算法和协议: 对称加密:加解密使用同一个秘钥; DES:Data Encryption Standard,数据加密标准&…...
无障碍Web开发:遵循WCAG标准构建包容性用户体验
无障碍Web开发旨在确保所有用户,无论其身体条件或能力如何,都能轻松、有效地访问和使用Web内容。遵循Web Content Accessibility Guidelines (WCAG) 标准是实现这一目标的关键。以下是一些基于WCAG标准的无障碍Web开发实践,以构建更具包容性的…...
Isaac Sim 3(学习笔记5.8)
Isaac Sim 利用深度学习获取mask掩码图 参考内容 Kubernetes官网 在 Linux 系统中安装并设置 kubectl | Kubernetes准备开始 kubectl 版本和集群版本之间的差异必须在一个小版本号内。 例如:v1.30 版本的客户端能与 v1.29、 v1.30 和 v1.31 版本的控制面通信。 用…...
对象定义成final类型还能改变吗
如果一个Java对象被定义为final类型,那么它的引用不能被改变,但是对象本身的状态仍然可以被修改。这意味着你可以改变final对象的属性,但是不能将其引用指向另一个对象。 例如,下面的代码中,虽然person对象被声明为fi…...
3分钟掌握图片比对:PicQuickCompare让你高效发现视觉差异
3分钟掌握图片比对:PicQuickCompare让你高效发现视觉差异 【免费下载链接】PicQuickCompare Compare two pictures quickly 项目地址: https://gitcode.com/gh_mirrors/pi/PicQuickCompare PicQuickCompare是一款专为快速图片比对而设计的轻量级工具…...
GitHub下载加速终极指南:告别龟速,3分钟让下载速度飙升300%
GitHub下载加速终极指南:告别龟速,3分钟让下载速度飙升300% 【免费下载链接】Fast-GitHub 国内Github下载很慢,用上了这个插件后,下载速度嗖嗖嗖的~! 项目地址: https://gitcode.com/gh_mirrors/fa/Fast-GitHub …...
Spring Boot项目实战:5步搞定sa-token与OAuth2.0的无缝整合(附完整代码)
Spring Boot项目实战:5步搞定sa-token与OAuth2.0的无缝整合(附完整代码) 在当今微服务架构盛行的时代,认证授权已成为系统设计中不可或缺的一环。对于Java开发者而言,如何在保持代码简洁的同时实现强大的权限控制&…...
开源视觉模型推荐:GLM-4v-9B,高分辨率输入,中文OCR领先
开源视觉模型推荐:GLM-4v-9B,高分辨率输入,中文OCR领先 1. 引言 在当今多模态AI快速发展的时代,视觉-语言模型正成为技术前沿的热点。GLM-4v-9B作为智谱AI最新开源的90亿参数视觉-语言多模态模型,凭借其11201120高分…...
Qwen2.5-Coder-1.5B代码修复实战:常见Bug自动诊断与修复
Qwen2.5-Coder-1.5B代码修复实战:常见Bug自动诊断与修复 你有没有过这样的经历?深夜赶项目,代码跑起来一堆红字,对着报错信息一头雾水,查了半天文档还是找不到问题在哪。或者,接手一个老项目,里…...
移动端视频适配难题:xgplayer的CSS全屏模式实战指南(含16:9与9:16适配技巧)
移动端视频适配难题:xgplayer的CSS全屏模式实战指南(含16:9与9:16适配技巧) 在移动端视频播放场景中,屏幕比例适配一直是开发者面临的棘手问题。传统全屏模式在处理非常规比例视频(如竖屏9:16内容)时往往表…...
MGeo门址解析应用场景:房产中介平台房源地址自动标准化与GIS热力图生成
MGeo门址解析应用场景:房产中介平台房源地址自动标准化与GIS热力图生成 1. 引言:房产中介的地址之痛 想象一下,你是一家房产中介公司的运营人员。每天,你的同事和合作方会通过各种渠道收集到成百上千条房源信息:有的…...
FireRed-OCR保姆级教程:一键部署,精准提取表格公式转Markdown
FireRed-OCR保姆级教程:一键部署,精准提取表格公式转Markdown 1. 引言:为什么选择FireRed-OCR? 在日常工作和学习中,我们经常遇到需要从PDF、图片等文档中提取表格、公式等内容的情况。传统OCR工具往往难以准确识别复…...
节能模式:OpenClaw+nanobot的间歇性任务调度技巧
节能模式:OpenClawnanobot的间歇性任务调度技巧 1. 为什么需要节能模式 去年夏天,我的电费账单突然飙升。排查后发现,那台24小时运行OpenClaw的工作站竟然是耗电大户——它持续调用着本地部署的Qwen大模型,GPU风扇昼夜不停地呼啸…...
HunyuanVideo-Foley应用场景:播客自动化剪辑、TTS语音情感增强音效
HunyuanVideo-Foley应用场景:播客自动化剪辑与TTS语音情感增强音效 1. 镜像概述与核心能力 HunyuanVideo-Foley私有部署镜像是一款专为音视频生成任务优化的AI工具包,特别针对RTX 4090D 24GB显存显卡进行了深度优化。这个开箱即用的解决方案将视频生成…...

