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

Source: Internet
Author: User

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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.