顶端粘滞效果的页面(vue版本)-优快云博客

本文介绍了一种在网页设计中使重要信息区域随滚动保持可见的方法，通过改变CSS属性，将元素从文档流中“抽离”，并悬浮固定在屏幕顶端，同时避免了页面其他部分的跳跃感，提供了平滑的滚动体验。

通常一个长的页面，需要滚动浏览，有部分重要信息会随着滚动而看不见，因此需要粘滞在顶端，而又不影响滚动浏览，我们可以这样实现。
布局设计，如下图所示：

3.页面向下滚动，A区越来越小，B慢慢往上升，如下图所示：

4.当A刚好消失，B正要开始消失的时候，通过改变B的css，把它”抽“出来，悬浮在顶端。由于B离开了文档流，因此C会往上”流动“，和A拼接上，因此，如果不做处理，会看到C跳跃一下，体验不好。因此，在这个”抽“出B的同时，补上一个同样高度的文档，这样就不会有跳跃了。

5.反方向滚动，道理也是类似的，在A区即将出现的时候，把悬浮固定的B“放”回文档流中，并把上一步中补位的文档去掉，这样，整个过程看起来就很舒服了，没有跳动。

6.关键代码

onScroll() { // 计算滚动的距离 
    let scrolled = document.documentElement.scrollTop || document.body.scrollTop // 计算A区的高度
    let header_height = null
    if (document.getElementsByClassName('header')[0]) {
        header_height = document.getElementsByClassName('header')[0].offsetHeight
    }
    console.log('滚动的距离:' + scrolled, '头部的高度:' + header_height) // 当滚动的距离等于A区的高度的时候，即是临界点，马上通过auto_fixed变量，给B区添加一个 // class，让B区浮起来 
    this.auto_fixed = {
        auto_fixed: true,
        fixed: scrolled >= header_height
    }
} //定义好class的css 
.auto_fixed {
    height: 3em;
    background: orange;
    line - height: 3em;
    text - align: center;
}.fixed {
    position: fixed;
    top: 0px;
    width: 100 % ;
}
复制代码

* 监听页面滚动：由于vue的机制，需要在mounted方法之后的$vm.$nextTick()里去监听滚动。

this.$nextTick(function () {
window.addEventListener('scroll', this.onScroll)
})  
复制代码

* 编写onScroll方法，判断滚动的距离，和A区的高度，当滚动距离大于等于A区高度的时候，马上通过改变B区的css，让它浮起来黏贴到顶端。

onScroll() {
    // 计算滚动的距离
    let scrolled = document.documentElement.scrollTop || document.body.scrollTop
    // 计算A区的高度
    let header_height = null
    if (document.getElementsByClassName('header')[0]) {
        header_height = document.getElementsByClassName('header')[0].offsetHeight
    }
    console.log('滚动的距离:' + scrolled, '头部的高度:' + header_height)
    // 当滚动的距离等于A区的高度的时候，即是临界点，马上通过auto_fixed变量，给B区添加一个
    // class，让B区浮起来
    this.auto_fixed = {
        auto_fixed: true,
        fixed: scrolled >= header_height
    }
}

//定义好class的css
.auto_fixed {
    height: 3em;
    background: orange;
    line - height: 3em;
    text - align: center;
}.fixed {
    position: fixed;
    top: 0px;
    width: 100 % ;
}
复制代码