首页 > 移动平台 > 详细

左侧导航跟随屏幕移动

时间:2020-01-02 18:38:21      阅读:115      评论:0      收藏:0      [点我收藏+]

由于是在内网开发无法截图自行花了个草图 记录一下

技术分享图片

 

实现

 

 

<template>
    <div class=left_follow_div id="follow  v-if="local>我是左侧导航</div>        
</template>

export default{
      data(){
        return{
        loval:true
      }
    },
    mouted(){
        window.addEventListener(‘scroll‘,this.btn_pos)
},
methods:{
btn_pos(){
var scrollTop =document.body.scrollTop||document.documentElement.scrollTop||window.pageYOffset;
var clientHeight=document.documentElement.clientHeight;
if(scrollTop <3700){
this.local=true
if(scrollTop >0&&scrollTop <500){
if(scrollTop <700){
scrollTop =700
}
document.getelementById(‘follow‘).setAtteribute("style","position:absolute;top:"+scrollTop +"px")
}else{
document.getelementById(‘follow‘).setAtteribute("style","position:fixed;top:200px")
}
}else{
document.getelementById(‘follow‘).setAtteribute("style","position:absolute;top:3700px")

}
}
}
}


左侧导航跟随屏幕移动

原文:https://www.cnblogs.com/aknife/p/12133703.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!