JS implements transparent gradient of navigation bar-JS Tutorial-php.cn

This time I will bring you JS to realize the transparent gradient of the navigation bar. What are theprecautionsfor realizing the transparent gradient of the navigation bar with JS. The following is a practical case, let's take a look.

mui has a built-in H5 version of the transparent gradient navigation control. For tutorials, please refer to the mui official website; transparent gradient navigation is a workaround to solve the problem of scroll bars reaching the top. Compared with dual webviews, it has higher performance and better performance. animation effect;

This article will share with you the implementation of MUI navigation bar transparent gradient effect based on native JS. The specific content details are as follows:

First of all, declare: Since the value of backgroundColor uses RGBA, which is not supported by IE8 and below, this effect does not support browsers of IE8 and below

css code

body,p,h1{margin: 0;} .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; background-color: rgba(255, 0, 0, 0.9); } .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;} .fixed-layer{ height: 100%; display: none; z-index: 100001; } .relative-layer{height: 100%;} .layer-content{ padding:3%; position: relative; top: 20%; } .layer-close{ width: 2rem; height: 2rem; position: absolute; top:3%; right: 3%; } .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; } .shop-search { width:16px; height:16px; position:absolute; top:7px; left:6px; } .layer-return{ background: url(images/return.png) no-repeat center center/12px 20px; } .layer-share{ background: url(images/share.png) no-repeat center center/20px 30px; } a { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; } .module-content{ min-width: 320px; max-width: 750px; width: 100%; margin: 0 auto; background: #fff; } .module-content p:first-child img{margin-top: 0;} .module-content p img{ display: block; width: 100%; margin-top: 10px; }

Copy after login

HTML code

Copy after login

JS code

(function(){ //获取滚动条当前位置 function getScrollTop(){   var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;   if(document.body){     bodyScrollTop = document.body.scrollTop;   }   if(document.documentElement){     documentScrollTop = document.documentElement.scrollTop;   }   scrollTop = (bodyScrollTop - documentScrollTop > 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); }())

Copy after login

Notice:

Not compatible with IE8 and belowIE browser;

550 is the final transparency of the scroll bar's arrival position, which can be customized as needed;

The A of RGBA of CSS final background color is the final transparency

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!