移动端基于vue吸顶效果，以及返回顶部

移动端基于vue吸顶效果，以及返回顶部

最近项目需要做一个吸顶的效果，整理了一下，说一下个人的一个大致得思路
首先吸顶呢，肯定有一个界限值，也就是一个吸顶效果出现得一个条件，那这个条件其实是看你自己需求，有了这个值，你在达到这个值得效果就出来了。如何做到吸顶效果，其实也就是在你得滚动条达到这个界限值得时候把你需要置顶得元素得定位方式改成fixed，就达到这个效果了。下面我们看代码
css

 .box_fixed {
            height: 40px;
            margin: 0 auto;
            line-height: 40px;
            background: #eee;
            width: 100%
        }

        h4 {
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        .is_fixed {
            position: fixed;
            top: 0;
            z-index: 999;
        }
        .getTop {
            width: 60px;
            height: 60px;
            position: fixed;
            bottom: 10px;
            right: 10px;
            border: 1px solid #eee;
            border-radius: 50%;
            text-align: center;
            line-height: 60px;
        }

html
为了达到效果，我这里写了很多个标签，让滚动条得效果出来，实际可以看自己项目需求

 

            
看到你全局考虑的年轻来我带你
            
看到你全局考虑的年轻来我带你
            
看到你全局考虑的年轻来我带你
            
看到你全局考虑的年轻来我带你
            
看到你全局考虑的年轻来我带你
            
看到你全局考虑的年轻来我带你
            
看到你全局考虑的年轻来我带你
            
看到你全局考虑的年轻来我带你
            

                
一座城，一个人   当前城市：{{city}}
                
                    
                    
                
            

            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
1
            
{{city}}
            
回到顶部
        

js部分

 mounted: function () {
            window.addEventListener('scroll', this.initHeight);
            this.$nextTick(() => {
                this.offsetTop = document.querySelector('#boxFixed').offsetTop;
            })
		//这里得部分先获取你需要吸顶得界限值
        },

methods: {
	//这里通过isFixed去控制你的吸顶效果得实现
            initHeight() {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                this.isFixed = scrollTop > this.offsetTop ? true : false;
                this.flag = scrollTop > this.offsetTop ? true : false;
            },
            getTop() {
                let that = this
                var timer = setInterval(function () {
                    let osTop = document.documentElement.scrollTop || document.body.scrollTop;
                    let ispeed = Math.floor(-osTop / 5);
                    document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
                    this.isTop = true;
                    if (osTop === 0) {
                        clearInterval(timer);
                    }
                }, 40)
            },

        },

总体的来说思路就是这样子。