Angular+ionic实现页面滑动搜索框背景色渐变

实现功能：页面滚动，搜索框背景由透明变白色
ts中添加监听事件

  // 监听滚动条
  resizeHeader(event){
    console.log(event)
    var _header =  document.getElementById("detailNavBar");
    let _opacity = event.detail.scrollTop / 235;
    if(_opacity > 1) {
      _opacity = 1
      _header.setAttribute('style','background: rgba(255,255,255,' + _opacity + ')');

    } else {
      _header.setAttribute('style','background: rgba(255,255,255,' + _opacity + ')');
    }
    console.log(_opacity)
    // _header.setAttribute('style','opacity:' + _opacity);
    console.log("aaa");
  }
  //加入方法
    ionViewWillEnter() {
    this.getData();
    this.slides.startAutoplay();
    this.resizeHeader(event);
  }

html中：

//搜索框添加id="detailNavBar" 
<section class="shop-item-header">
    <div id="detailNavBar" (click)="changebgcolor()">
        <div class="shop-content-left">
            <img class="shop-cleft-img" src="../../../assets/icon/search-icon/left.png">
            <div class="shop-cleft-text">商品交易</div>
        </div>
        <div class="shop-item-search">
            <img class="shop-search-find" src="../../../assets/icon/search-icon/search.png">
            <input class="shop-search" type="text" placeholder="搜索商品">
            <img class="shop-search-voice" src="../../../assets/icon/search-icon/voice.png">
        </div>
        <div class="shop-content-right">
            <img class="shop-cright-img" src="../../../assets/icon/search-icon/message.png">
            <div  class="shop-cright-text">消息</div>
        </div>
    </div>
</section>
//页面父容器添加事件方法
<ion-content class="shop-home" fullscreen (ionScroll)="resizeHeader($event)" scrollEvents="true">

</ion-content>