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

2、css

3、js

最终效果：

注意：

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

1、

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

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

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

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

以上所述是小编给大家介绍的基于JS实现仿京东搜索栏随滑动透明度渐变效果。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。