京东页面(黏性定位的实现) |
您所在的位置：网站首页 › 京东定位设置 › 京东页面(黏性定位的实现) |
京东页面(黏性定位的实现)
|
前言: 本文章将分享一些我这周在制作京东页面的实现部分,页面表面大体和京东页面差不多,在里面加了一点script,但是很容易理解,希望大家看到可以有所收获,如果我有哪部分写的不太好,欢迎大家来跟我交流! 🥰个人主页:心.c 🥳文章专题:京东页面制作 🙈欢迎大家点赞❤️收藏💞
京东 关于这个页面,我想分享一下页面中头部的黏性定位,这个定位实现是我自己写的,关于script是本人在AL上搜的,希望可以对大家有帮助,大家有不清楚的地方都欢迎随时来问我. HTML下面HTML代码中是视频中关于鼠标滚动时出现的头部搜索区域和头部导航区域, 大致就是当页面高度达到一定位置时,头部的黏性定位就会弹出来,然后加上一些动画(animation),设置时间和位置就可以更加自然的显示出来 
我的购物车
0
精选
猜你喜欢
智能先锋大电器械
居家优品品质生活
超市百货百货生鲜
时尚达人美妆穿搭
进口好物京东国际
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这个是我自己直接引入修改了高度,如果大家有更加合适的当然可以 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"; } }到这里我的分享就结束了,如果大家想要了解更多或者想要小编的源码,都可以在评论区里面私信我哦! 欢迎大家和我一起探讨 ! ! !
|
【本文地址】
今日新闻 |
推荐新闻 |