基于JS实现仿京东搜索栏随滑动透明度渐变效果_网络技术

基于JS实现仿京东搜索栏随滑动透明度渐变效果

发布时间 - 2026-01-11 02:15:58 点击率：次

废话不多说，直接上代码：

1、HTML

<header class="module-layer"> 
 <div class="module-layer-content"> 
  <div class="search-box-cover"></div> 
  <p class="layer-return"></p> 
  <h1 class="layer-head-name"> 
   <div class="pr search-box"> 
    <img class="shop-search" src="images/search.png"/> 
    <input id="shop-input" type="text" placeholder="搜索店内商品" value="" /> 
   </div> 
  </h1> 
  <p class="layer-share"></p> 
 </div> 
</header>

其中search-box-cover就是控制透明度渐变的背景

2、css

.module-layer { 
 width:100%; 
 position:fixed; 
 top:0; 
 left:0; 
 z-index:100000; 
} 
.module-layer-content { 
 position:relative; 
 min-width:320px; 
 max-width:750px; 
 width:100%; 
 margin:0 auto; 
} 
.module-layer-bg { 
 width:100%; 
 height:100%; 
 background:#000; 
 opacity:.7; 
 position:absolute; 
 top:0; 
 left:0; 
 z-index:-1; 
} 
.layer-head-name { 
 height:50px; 
 line-height:50px; 
 text-align:center; 
 padding:0 50px; 
 font-size:20px; 
} 
.layer-return,.layer-share { 
 width:50px; 
 height:50px; 
 line-height:50px; 
 text-align:center; 
 position:absolute; 
 top:0; 
 z-index:1; 
} 
.layer-return { 
 left:0; 
} 
.layer-share { 
 right:0; 
} 
.pr { 
 position:relative; 
} 
#shop-input::-webkit-input-placeholder { 
 color:#fff; 
} 
#shop-input:-moz-placeholder { 
 color:#fff; 
} 
#shop-input::-moz-placeholder { 
 color:#fff; 
} 
#shop-input:-ms-input-placeholder { 
 color:#fff; 
} 
#shop-input { 
 border:none; 
 outline:none; 
 background:transparent; 
} 
.search-box { 
 height:30px; 
 border-radius:20px; 
 top:10px; 
 overflow:hidden; 
 z-index:10; 
} 
.search-box:after { 
 content:''; 
 display:block; 
 width:100%; 
 height:30px; 
 background:#fff; 
 opacity:.5; 
 position:absolute; 
 top:0; 
 left:0px; 
 z-index:-1; 
} 
#shop-input { 
 height:28px; 
 line-height:28px; 
 font-size:16px; 
 position:absolute; 
 top:0; 
 left:30px; 
}

3、js

$(function(){ 
 var $body = $('body'); 
 var setCoverOpacity = function() { 
  $body.find('.search-box-cover').css({ 
   opacity: ((($body.scrollTop() / 150) > 0.9) ? 0.9 : ($body.scrollTop() / 150)) 
  }) 
 } 
//初始化设置背景透明度 
 setCoverOpacity(); 
//监听滚动条事件，改变透明度 
 $(window).scroll(function() { 
  setCoverOpacity(); 
 }); 
})

最终效果：

注意：

特别注意的一条：强制刷新，会导致页面的重新加载，所以动态加入的css样式不会存在，那么对透明背景的初始化非常重要，在网页端用户强制刷新，才不会失去透明效果。

1、

((($body.scrollTop() / 150) > 0.9) ? 0.9 : ($body.scrollTop() / 150))

此三目表达式是判断当前滚动条位置所在位置，如果位置值除以150大于0.9，就返回0.9，反之就返回那个小于等于0.9的值，将返回的值设置为背景的透明度就完成了。

2、由于滚动条的位置是动态获取的，所以设置透明度会不停改变，不用单独再做渐变的动画效果。

3、最终透明度问题，京东在最终背景设置的是0.9，所以本案例也采用的0.9，同时体验效果会更好。

4、滚动条位置导致的渐变，将150设置更大，渐变的距离会更长。

以上所述是小编给大家介绍的基于JS实现仿京东搜索栏随滑动透明度渐变效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# js # 搜索栏滑动透明度渐变 # 推荐js实现商品分类到搜索栏友好提示（人机交互） # js实现搜索栏效果 # 滚动条 # 小编 # 的是 # 京东 # 在此 # 更大 # 给大家 # 非常重要 # 多说 # 设置为 # 再做 # 所述 # 给我留言 # 店内 # 更长 # 感谢大家 # 疑问请 # 有任何 # 完成了 # 加载

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Debian下TigerVNC支持哪些功能

下一篇：2025年网站建设多少钱？价格差异原因何在？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Debian下TigerVNC支持哪些功能

下一篇：2025年网站建设多少钱？价格差异原因何在？