今天遇到个需求：我这里借用小米商城的详情页做个比喻吧。

刚开始其商品详情页是这样的：

当滚动到一定高度时，是这样的：

可以看到当滚动到轮播图底下的时候，详情页的菜单完全显现出来。

以下上代码：

HTML：

<div class="detail-header"><div class="left operate" :style="{'background-color':iconStyle.BackgroundColor,'color':iconStyle.color}"><span class="iconfont icon-fanhui"></span></div><div class="active-box" :style="{'opacity':Opacity}"><div>商品</div><div>评价</div><div>评价</div><div>详情</div><div>推荐</div></div><div class="right operate" :style="{'background-color':iconStyle.BackgroundColor,'color':iconStyle.color}"><span class="iconfont icon-home"></span></div><div class="header-bg" :style="{'opacity':Opacity}"></div></div>

css:

.detail-header{position: absolute;left: 0;right: 0;height: 1.173333rem;z-index: 999;.active-box{position: absolute;left: 50%;transform: translateX(-50%);white-space: nowrap;display: flex;align-items: center;justify-content: center;line-height: 1.173333rem;font-size: 0.426667rem;opacity:0;z-index:67;>div{padding: 0 0.4rem;}}.operate{position: absolute;width: 0.906667rem;height: 0.906667rem;line-height: 0.906667rem;border-radius: 50%;background-color: rgba(0,0,0,.3);color: #fff;text-align: center;margin: 0.133333rem;display: table;z-index: 58;.iconfont{display: table-cell;font-size: 0.4rem;vertical-align: middle;}}.left{left:0;}.right{right: 0;}.header-bg{background-color: #fff;height: 100%;opacity: 0;z-index: 66;}}

js:

data(){return{Opacity:0,iconStyle:{BackgroundColor:'rgba(0, 0, 0, 0.3)',color:'#fff'}}},
ContentScroll(e){let top = (e.target.scrollTop / 120);this.Opacity = top >= 1?1:top;console.log(top)if(top >= 1){this.iconStyle.BackgroundColor = 'unset'this.iconStyle.color = '#333'}else{this.iconStyle.BackgroundColor = 'rgba(0, 0, 0, 0.3)'this.iconStyle.color = '#fff'}}

在上面代码中可以看出，头部代码是绝对定位的，头部不要设置背景图，因为我么是通过设置opacity来控制元素的显示隐藏的，所以我们用元素来代替背景的作用。只要设置好图层z-index就不会发生：操作菜单和按钮被遮挡的情况。记住要设置定位哦！

这里的e.target.scrollTop / 120 ；120是你轮播图的高度，根据自己的情况而定。

注意：这里主要是记录实现原理，js代码没那么完整，大家复制的时候注意。还有就是做的没小米商城那么丝滑，大家可以自行优化以下。