ionic3实现透明导航栏

这里（1）实现透明导航栏并且根据页面滑动来调整导航栏的透明度（2）导航栏根据页面滑动的%来隐藏，当向上滚动时在显示。

实现效果如下：

实现以上效果：（1）你要在ion-content里面定义一个div（class="headerNav"）用来模拟导航栏的样子，其次还要在这个div里面定义一个div(class="header_bg")来设置当页面滚动时导航栏的背景颜色等（这里div里面也写导航栏的内容是由于：页面滚动到ion-list的时候页面为白色，这时候导航栏里面的文字就看不见（导航栏里文字为白色））。（2）导航栏根据页面滚动的%来隐藏，这里计算屏幕的高度，和目前滚动的高度，（3）判断向上滚动还是向下滚动来确定是否显示导航栏。

（1）

  

    

      
    
    

      
        二级次界面管理员
      
    
    

      
    

    

      

        
      
      

        
          二级次界面管理员
        
      
      

        
      
    
  
  
  

    

      
        
          
        
        
          
        
        
          
        
        
          
        
      
    
    
      
        列表查询 此处放置列表条件检索按钮
      
      
        
          {{item.title}}
        
        
          
            删除
          
        
      
    
  
  
    
      
    
    
      
        
      
      
        
      
      
        
      
    
  

2.

import { Component, ViewChild, ElementRef  } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the LzhrmsPersonnelPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-lzhrms-personnel',
  templateUrl: 'lzhrms-personnel.html',
})
export class LzhrmsPersonnelPage {

  @ViewChild('headBgColor')
  headBgColorDiv:ElementRef;
  @ViewChild('lyScroll')
  lyScrollDiv:ElementRef;
  @ViewChild('headerNavHidden')
  headerNavHidDiv:ElementRef;

  items = [
    {
      title: 'item1'
    }
  ];

  constructor(public navCtrl: NavController, public navParams: NavParams,public  elementRef: ElementRef) {
  }
  
  //等待页面加载完成之后在加载
  ionViewDidLoad() {
    this.headerChangeColorAndHidHeader();
  }

  additem() {
    this.items.push({ title: 'item' + (this.items.length + 1) });
  }
  deletitem(list, index) {
    list.splice(index, 1);
  }

   // 改变颜色
   public headerChangeColorAndHidHeader() {
   
    let nowHeight=0,beforeHeight=0;
    let displayDiv=this.headerNavHidDiv.nativeElement;
    let HeadBgdiv= this.headBgColorDiv.nativeElement;
    let scrollDiv = this.lyScrollDiv.nativeElement;
    // 计算屏幕的高
    let screenHeight=window.screen.height;

    var nowOpacity = 0;
    scrollDiv.onscroll = function (event) {
        //上滚显示菜单导航
        nowHeight = scrollDiv.scrollTop;
        console.log(beforeHeight+"   "+nowHeight);
        if(nowHeight<=beforeHeight){
          displayDiv.style.visibility='visible';
        }
        
        //修改颜色
        if (scrollDiv.scrollTop / 250  < 0.85) {
          nowOpacity = this.scrollTop / 250;
        }
        HeadBgdiv.style.opacity = nowOpacity;
        // 当滑动到一定程度隐藏顶部菜单
        if(this.scrollTop/screenHeight>0.30 && (nowHeight>beforeHeight) ){
          displayDiv.style.visibility='hidden';
        }
           
        setTimeout(function(){beforeHeight=nowHeight;},0);  
        
    }
  }
}

3.

   ion-content{
        overflow:scroll;
      }
    .headerNav{
        background-color:transparent;
        position: fixed;
        z-index: 2;
        width:100%;
        height: 7vh;
        visibility:visible;
    }
    .headerNav .headerHome{
        padding:1vh;
        width:20%;
        height: inherit;
        float:left;
        color:white;
        font-size:2.5rem;
        text-align: center;
    }
    .headerNav .headerTitle{
        padding:2vh;
        width:60%;
        height: inherit;
        color: white;
        font-size:1.5rem;
        text-align: center;
        float:left;
    }
    .headerNav .headerMenu{
        padding:1vh;
        width:20%;
        height:inherit;
        color:white;
        font-size:2.5rem;
        text-align: center;
        float:right;
    }
    .headerNav #header_bg{
        background-color: #4323d4;
        opacity: 0;
        height: inherit;
        position: fixed;
        width: 100%;
        
    }

通过以上代码就可以实现以上效果：

这里我说一下我写这个效果时出现的错误：

（1）position：fixed和position：absolute的区别：

         fixed：固定定位     absoulte：绝对定位

         在没有滚动条的情况下没有区别

          在有滚动条的情况下：fixed定位不会随滚动条的一定而移动，absoulte会随滚动条滚动而移动（一般fixed用在遮盖层或固定在页面摸个位置）

   （2）display：none和    visibility:hidden:

              这两个都是用来隐藏一个div的实现效果一样，

               display：none是直接隐藏且物理位置也消失，

               visibility:hidden是隐藏但物理位置还在，他所占的空间还存在

    （3）setTimeout延时0毫秒的作用：

             正常情况下javascript都是按照顺讯执行的，但是有时候需要等后面语句都执行完在执行本身，这时候就用setTimeout延时0来实现

            例如：

alert(1); 
setTimeout("alert(2)", 0); 
alert(3); 

这里是我的一些总结，希望对大家有一点帮助，其次这里有什么需要完善的希望大家多多指教