html导航栏透明渐变效果,原生JS实现 MUI导航栏透明渐变效果

JS代码

0) ? bodyScrollTop : documentScrollTop;

return scrollTop;

}

//获取CSS样式

function getStyle(element,attr){

if(element.currentStyle){

return element.currentStyle[attr];

}else{

return window.getComputedStyle(element,null)[attr];

}

}

//获取原始backgroundColor值

var color = getStyle(document.getElementsByClassName('module-layer-content')[0],'backgroundColor');

//取到RGB

var colorRgb = color.substring(0,color.lastIndexOf(',') + 1);

//取到A

var colorA = color.substring(color.lastIndexOf(',') + 1,color.length - 1);

//对A判断，如果最终值小于0.9，直接设置为1

if(colorA < 0.9){colorA = 1;}

//设置背景色的A的函数

var setCoverOpacity = function() {

document.getElementsByClassName('module-layer-content')[0].style.background = colorRgb + (((getScrollTop() / 550) > colorA) ? colorA : (getScrollTop() / 550)) + ')';

}

//初始化函数

setCoverOpacity();

//绑定滚动监听事件

window.addEventListener('scroll',setCoverOpacity,false);

}())

注意：

不兼容IE8及以下的IE浏览器；

550是滚动条到达位置的最终透明度，此处根据需要自定义；

CSS终背景颜色的RGBA的A是最终透明度

总结

以上所述是小编给大家介绍的原生JS实现 MUI导航栏透明渐变效果。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！