Native JS achieves MUI navigation bar transparent gradient effect and jsmui navigation bar gradient

Native JS achieves MUI navigation bar transparent gradient effect and jsmui navigation bar gradient

Mui has a built-in H5 version of transparent gradient navigation control. For more information about the tutorial, see mui official website. Transparent gradient navigation is a work und to the top of the scroll bar. Compared with double webview, it has higher performance and better animation effects;

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

First, declare: because the value of backgroundColor is RGBA, IE8 and below are not supported, this effect does not support IE8 and below browsers

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 div:first-child img{margin-top: 0;}.module-content div img{  display: block;  width: 100%;  margin-top: 10px;}

HTML code

<Header class = "module-layer"> <div class = "module-layer-content"> <p class = "layer-return"> </p> 

JS Code
(Function () {// obtain the current position of the scroll bar function getScrollTop () {var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; if (document. body) {bodyScrollTop = document. body. scrollTop;} if(document.doc umentElement) {documentScrollTop = document.doc umentElement. scrollTop;} scrollTop = (bodyScrollTop-documentScrollTop> 0 )? BodyScrollTop: documentScrollTop; return scrollTop;} // gets the CSS style function getStyle (element, attr) {if (element. currentStyle) {return element. currentStyle [attr];} else {return window. getComputedStyle (element, null) [attr] ;}// obtain the original backgroundColor value var color = getStyle (document. getElementsByClassName ('module-layer-content') [0], 'backgroundcolor'); // obtain RGB var colorRgb = color. substring (0, color. lastInd ExOf (',') + 1); // obtain A var colorA = color. substring (color. lastIndexOf (',') + 1, color. length-1); // Judge A. if the final value is smaller than 0.9, set it to 1 if (colorA <0.9) {colorA = 1 ;} // var setCoverOpacity = function () {document. getElementsByClassName ('module-layer-content') [0]. style. background = colorRgb + (getScrollTop ()/550)> colorA )? ColorA: (getScrollTop ()/550) + ')';} // initialize the setCoverOpacity () function; // bind the window of the rolling listening event. addEventListener ('scroll ', setCoverOpacity, false );}())
Note:
Not compatible with IE 8 or earlier browsers;
550 is the final transparency of the arrival position of the scroll bar, which can be customized as needed;
A of RGBA of CSS final background color is final transparency
Summary
The above section describes how to implement the MUI navigation bar transparent gradient effect of native JS introduced by xiaobian. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!