mounted(){
        let self = this;
        //添加滚动事件
         window.addEventListener('scroll',this.scrollHandle)
    },
    destroyed(){
        //单页面应用，当切换路由，当前组件被销毁，但是滚动事件是添加在window 上的，并不会被销毁
        //所以依然在监听滚动，浪费性能，
        //2 当操作当前组件的dom 的时候会报错，因为当前组件已经被销毁了
        console.log("组件被销毁");
        window.removeEventListener('scroll',this.scrollHandle);
    },
    methods:{
        //getBoundingClientRect() 方法我的另外一篇文章有讲解，普通的offettop scrolltop
       //获取的是相对于父元素的位置，这个获取的是相对于窗口的距离。
        
        scrollHandle(){
            if(document.getElementsByClassName('product')[0].getBoundingClientRect().top<30 && document.getElementsByClassName('product')[0].getBoundingClientRect().bottom >200){
                 document.getElementById('map').style.position = 'fixed';
            }else {
                 document.getElementById('map').style.position = 'relative';
            }

            console.log(11111111)
         } 
    }