JS implements transparent gradient of navigation bar

This time I will bring you JS to realize the transparent gradient of the navigation bar. What are the precautions for 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;
}

HTML code

<header class="module-layer">
  <p class="module-layer-content">
    <p class="layer-return"></p>
    <h1 class="layer-head-name">
      <p class="pr search-box">
        <img class="shop-search" src="images/search.png"/>
        <input id="shop-input" type="text" placeholder="搜索店内商品" value="" />
      </p>
    </h1>
    <p class="layer-share"></p>
  </p>
</header>
<p class="module-content">
  <p><img src="images/banner.png"/></p> 
  <p><img src="images/banner1.png"/></p> 
  <p><img src="images/banner3.png"/></p>
  <p><img src="images/banner4.jpg"/></p>
  <p><img src="images/banner5.png"/></p>
  <p><img src="images/banner6.png"/></p>
  <p><img src="images/banner7.jpg"/></p>
  <p><img src="images/banner8.jpg"/></p>
</p>

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(&#39;module-layer-content&#39;)[0].style.background = colorRgb + (((getScrollTop() / 550) > colorA) ? colorA : (getScrollTop() / 550)) + ')';
  }
  //初始化函数
  setCoverOpacity();
  //绑定滚动监听事件
  window.addEventListener('scroll',setCoverOpacity,false);
}())

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!

Recommended reading:

mint-ui loadmore Pull-up loading and pull-down refresh conflict handling method

Templates in ES6 Detailed explanation of string usage

The above is the detailed content of JS implements transparent gradient of navigation bar. For more information, please follow other related articles on the PHP Chinese website!