html
仅实现导航吸顶效果(第一种)
<div class="member_top" :class="navBarFixed == true ? 'navBarWrap' :''"><qdd-icon class="icon-shezhi fr mr40" color="#fff" size="0.84rem"></qdd-icon><qdd-icon class="icon-erweima1 fr mr40" color="#fff" size="0.84rem"></qdd-icon></div>
改变导航的背景颜色 有透明到不透明 (第二种)用到三元写法 根据判断控制背景颜色变化
<Header :boxshadow="false" :bgcolor="[navBarFixed ? '#fff' : 'rgba(255,255,255,0)' ]" ></Header>
css
.navBarWrapposition:fixedbackground rgba(255,255,255,1)
js
<script>export default {data(){return{navBarFixed:false, // 导航是否吸顶}},mounted(){// 事件监听滚动条window.addEventListener('scroll', this.watchScroll)},methods:{watchScroll () {var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop// 当滚动超过 120 时,实现吸顶效果if (scrollTop > 120) {this.navBarFixed = true} else {this.navBarFixed = false}},},}</script>