<template>

    <div>

        <router-link tag="div" to="/" class='header-abs' v-show="showabs">

            <div class="iconfont header-abs-back">&#xe624;</div>

        </router-link>

        <div class='header-fixed' v-show="!showabs" :style="opacityStyle">

            <router-link to="/" >

                <div class="header-fixed-back iconfont">&#xe624;</div>

            </router-link>

            景点详情

        </div>

    </div>

</template>

<script>

    export default{

        name:"DetailHeader",

        data(){

            return{

                showabs:true,

                opacityStyle:{opacity:0},

            }

        },

        methods:{

            handleScroll(){

                // console.log(112);

                const top=document.documentElement.scrollTop || document.body.scrollTop ||window.pageYOffset;

                if(top>60){

                    let opacity=top/140;

                    opacity=opacity>1?1:opacity;

                    this.opacityStyle={opacity,};

                    this.showabs=false;

                }else{

                    this.showabs=true;

                }

            },

        },

        mounted(){

            window.addEventListener("scroll",this.handleScroll);

        },

        destroyed(){

            window.removeEventListener("scroll",this.handleScroll);

        },

    }

</script>

<style lang="stylus" scoped>

@import '~styles/varibles.styl';

.header-abs

    position:absolute;

    left:.2rem;

    top:.2rem;

    width:.8rem;

    height:.8rem;

    line-height:.8rem;

    text-align:center;

    border-radius:.4rem;

    background:rgba(0,0,0,0.8);

    .header-abs-back

        font-size:.4rem;

        color:#fff;

.header-fixed

    z-index:2;

    position:fixed;

    top:0;

    left:0;

    right:0;

    overflow:hidden;

    height:$headerHeight;

    line-height:$headerHeight;

    text-align:center;

    color:#fff;

    background:$bgColor;

    font-size:.32rem;

    .header-fixed-back

        position:absolute;

        top:0;

        left:0;

        width:.64rem;

        font-size:.4rem;

        text-align:center;

        color:#fff;

</style>

老师我做完后发现详情页面上下移动首页也跟着上下移动这是哪儿出现问题了呢？