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

　　

废话不多说,直接上代码:

　　

<强> 1,HTML

　　 　　 　　& lt;头类="模块层"比; 　　& lt; div类=癿odule-layer-content”比; 　　& lt; div类=" search-box-cover "祝辞& lt;/div> 　　& lt; p class=" layer-return”祝辞& lt;/p> 　　& lt; h2类=發ayer-head-name”比; 　　& lt; div类=肮厮阉骺颉北? 　　& lt; img类=" shop-search " src=" https://www.yisu.com/zixun/images/search.png "/比; 　　& lt;输入id=" shop-input " type=" text "占位符=八阉鞯昴谏唐? value="/比; 　　& lt;/div> 　　& lt;/h2> 　　& lt; p class=" layer-share”祝辞& lt;/p> 　　& lt;/div> 　　& lt;/header>之前 　　 　　

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

　　

<强> 2,css

　　 　　 　　.module-layer { 　　宽度:100%; 　　位置:固定; 　　上图:0; 　　左:0; 　　z - index: 100000; 　　} 　　.module-layer-content { 　　位置:相对; 　　min-width: 320 px; 　　max-width: 750 px; 　　宽度:100%; 　　保证金:0汽车; 　　} 　　.module-layer-bg { 　　宽度:100%; 　　高度:100%; 　　背景:# 000; 　　透明度:7; 　　位置:绝对的; 　　上图:0; 　　左:0; 　　z - index: 1; 　　} 　　.layer-head-name { 　　高度:50 px; 　　行高:50 px; 　　text-align:中心; 　　填充:0 50 px; 　　字体大小:20 px; 　　} 　　.layer-return。layer-share { 　　宽度:50 px; 　　高度:50 px; 　　行高:50 px; 　　text-align:中心; 　　位置:绝对的; 　　上图:0; 　　z - index: 1; 　　} 　　.layer-return { 　　左:0; 　　} 　　.layer-share { 　　右:0; 　　} 　　.pr { 　　位置:相对; 　　} 　　# shop-input: -webkit-input-placeholder { 　　颜色:# fff; 　　} 　　# shop-input: -moz-placeholder { 　　颜色:# fff; 　　} 　　# shop-input: -moz-placeholder { 　　颜色:# fff; 　　} 　　# shop-input: -ms-input-placeholder { 　　颜色:# fff; 　　} 　　# shop-input { 　　边界:没有; 　　大纲:没有; 　　背景:透明; 　　} 　　.search-box { 　　高度:30 px; 　　border - radius: 20 px; 　　上图:10 px; 　　溢出:隐藏; 　　z - index: 10; 　　} 　　.search-box:{后 　　内容:”; 　　显示:块; 　　宽度:100%; 　　高度:30 px; 　　背景:# fff; 　　透明度:5; 　　位置:绝对的; 　　上图:0; 　　左:0 px; 　　z - index: 1; 　　} 　　# shop-input { 　　高度:28 px; 　　行高:28 px; 　　字体大小:16 px; 　　位置:绝对的; 　　上图:0; 　　左:30 px; 　　} 　　 　　

<强> 3,js

　　 　　 　　$(函数(){ 　　var身体=美元(身体的); 　　var setCoverOpacity=function () { 　　body.find美元(.search-box-cover) . css ({ 　　透明度:((($ body.scrollTop()/150)比;0.9)& # 63;0.9:body.scrollTop ()/150)) 　　}） 　　}//初始化设置背景透明度 　　setCoverOpacity ();//监听滚动条事件,改变透明度 　　$(窗口).scroll(函数(){ 　　setCoverOpacity (); 　　})； 　　}) 　　 　　

最终效果:

　　

基于JS实现仿京东搜索栏随滑动透明度渐变效果”> <img src= 　　((($ body.scrollTop()/150)比;0.9)& # 63;0.9:body.scrollTop ()/150)) 　　 　　

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

　　

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

　　

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

　　

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

　　

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

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