JS implementiert einen transparenten Farbverlauf der Navigationsleiste

Dieses Mal bringe ich Ihnen JS, um den transparenten Farbverlauf der Navigationsleiste zu realisieren. Was sind die Vorsichtsmaßnahmen, um den transparenten Farbverlauf der Navigationsleiste mit JS zu realisieren? Fall, werfen wir einen Blick darauf.

mui verfügt über eine integrierte H5-Version der transparenten Verlaufsnavigation. Anleitungen finden Sie auf der offiziellen Website von mui. Dies kann das Problem umgehen, dass die Bildlaufleisten den oberen Rand erreichen mit zwei Webansichten hat es eine höhere Leistung und einen besseren Animationseffekt; In diesem Artikel wird die Implementierung des transparenten Verlaufseffekts der MUI-Navigationsleiste basierend auf nativem JS erläutert. Die spezifischen Inhaltsdetails lauten wie folgt:

Erklären Sie zunächst Folgendes: Da der Wert von „backgroundColor“ RGBA verwendet, das von IE8 und niedriger nicht unterstützt wird, unterstützt dieser Effekt keine Browser von IE8 und niedriger

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);
}())

Hinweis: Nicht kompatibel mit IE8 und niedriger

IE-Browser

; 550 ist die endgültige Transparenz der Position der Bildlaufleiste, die nach Bedarf angepasst werden kann Das A der RGBA der endgültigen CSS-Hintergrundfarbe ist die endgültige Transparenz.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln php Chinesische Website!

Empfohlene Lektüre:

mint-ui Loadmore Pull-up-Lade- und Pulldown-Aktualisierungskonfliktbehandlungsmethode

Vorlage in ES6 Detaillierte Erläuterung der String-Verwendung

Das obige ist der detaillierte Inhalt vonJS implementiert einen transparenten Farbverlauf der Navigationsleiste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!