<template>
<div class="nav-bar" :class="{'is_fixed':isFixed}">
<div class="container">
<div class="pro-title">
<!-- {{title}} -->
小米8
</div>
<div class="pro-param">
<a href="javascript:;">概述</a><span>|</span>
<a href="javascript:;">参数</a><span>|</span>
<a href="javascript:;">用户评价</a>
<slot name="buy"></slot>
</div>
</div>
</div>
</template>
<script>
export default{
name:'nav-bar',
// props:{
// title:String
// },
data(){
return {
isFixed:false
}
},
mounted() {
window.addEventListener('scroll',this.initHeight)
},
methods:{
initHeight(){
let scrollTop = window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop//浏览器滚动的高度
this.isFixed = scrollTop>152?true:false//滚动的距离大于152的时候
console.log(this.isFixed)
//页面Y轴的偏移量 window.pageXOffset = document.documentElement.scrollTop
// 页面Y轴的偏移量 如果取不到的话,就取scrollTop值,如果取不到就取body的scrollTop值
}
},
beforeDestroy(){
window.removeEventListener('scroll',this.initHeight,false)//第三个参数是这个事件的行为处理方式,是冒泡false,还是捕获true,通过冒泡的方式把这个事件干掉
}
}
</script>
<style lang="scss">
@import './../assets/scss/config.scss';
@import './../assets/scss/mixin.scss';
.nav-bar{
height:70px;
line-height:70px;
border-top:1px solid $colorH;
background-color:$colorG;
z-index:10;
&.is_fixed{
position:fixed;
top:0;
width:100%;
box-shadow: 0 5px 5px $colorE;
}
.container{
@include flex();
.pro-title{
font-size:$fontH;
color:$colorB;
font-weight:bold;
}
.pro-param{
font-size:$fontJ;
span{
margin:0 10px;
}
a{
color:$colorC;
}
}
}
}
</style>
vue功能之“组件吸顶实现”
最新推荐文章于 2023-09-10 11:32:36 发布