vue吸顶效果

关于吸顶

吸顶效果在使得用户在滑动读取数据的时候把产品需要持续展示的控件及信息一直固定在屏幕上方,以便用户操作和交互。

产生背景

  随着技术不断更新与用户审美不断提升,一些App中/浏览器中的常用交互也在对用户更加友好,在某些数据展示较多页面或者导航栏页面,为了将栏目划分,使得视图模块更加明显,吸顶效果便在此背景下孕育而生。  那么,我们如何在web端来做一个吸顶效果呢?


切入正题——吸顶

简单效果展示
需求分析
  1. 有了效果图,首先我们要分析一下结构:
    • 吸顶上方数据
    • 需要吸顶的元素
    • 吸顶下方数据
  2. 接着我们逻辑走一下:(我们设吸顶元素为X)
    • 在页面滑动距离 <= 吸顶元素距离顶端距离时,不吸顶
    • 否则,吸顶
  3. 有了这个大前提,继续考虑,如何做到吸顶呢?
    • 设置该元素的position为fixed属性
    • 动态控制是否展示该样式
    • 扩展:加点动画效果(这里以渐变为示例)
代码及注释
// html
<template>
    <div class="scrollFixed">
        <!-- 上方数据 -->
        <div class="sTop">
            <ul>
                <li v-for="(ietm, index) in 10">这是吸顶上方的第{{index + 1}}条数据</li>
            </ul>
        </div>
        <!-- 吸顶元素 -->
        <nav class="nav" id="searchBar" :class="scrollFixed === true ? 'isFixed' :''">{{ text }}</nav>
        <!-- 下方数据 -->
        <div class="sBottom">
            <ul>
                <li v-for="(ietm, index) in 30">这是吸顶下方的第{{index + 1}}条数据</li>
            </ul>
        </div>
    </div>
</template>

// js
<script>
    export default {
        data() {
            return {
                text: '需要吸顶',
                scrollFixed: false,
                offsetTop: 0
            }
        },
        methods: {
            windowScroll () {
                // 滚动条顶部 距 滚动原点的高度
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                /**
                 * 三目运算
                 * 两个高度比较
                 * 如果滑动距离 > 吸顶元素到页面顶端距离  动态添加
                 */
                scrollTop >= this.offsetTop ? (this.scrollFixed = true, this.text = '已吸顶') : (this.scrollFixed = false, this.text = '需要吸顶');
            }
        },
        mounted() {
            // 需吸顶元素 距 离浏览器顶端的高度
            this.offsetTop = document.querySelector('#searchBar').offsetTop;
            // 滚动监听
            window.addEventListener('scroll', this.windowScroll);
        },
        destroyed () {
            // 关闭 销毁监听
            window.removeEventListener('scroll', this.windowScroll);
        }
    }
</script>

<style scoped type="text/scss" lang="scss">
.isFixed{
    position:fixed;
    top:0;
    left: 0;
    z-index:999;
    background: #12d168;
    transition: all 1s;
    color: #7511ff;
}
// 基本样式略
// ......
</style>

备注

  此demo在流行浏览器中运行问题不大,但是没有详测兼容性。如果要在生产上运用,务必做好各端兼容。

本文分享自微信公众号 - 流眸(zxm0146),作者:流眸

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-04-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端技巧——js篇

    流眸
  • CSS布局之道——内凹圆角

    但是细想之后发现两者皆不可用,border-radius处理的话是凸角,舍弃;定位需要独立出来两个模块,复杂度高了,舍弃。可是舍弃后,需要怎么做呢?切背景图吗?...

    流眸
  • CSS——loading动画

      由图可见,动画1中有三根竖线,在进行变长变短的高度变化以及线条的颜色变化,因此分为以下几个步骤:

    流眸
  • 自学前端第三天

    小小咸鱼YwY
  • 分形数学助力股市预测

    在金融市场中,投资者最常用的两种交易策略是动量和均值回归策略。如果股票表现出动量(或如下图所示的趋势行为),那么如果其上一时期已经上涨(下跌),则其当前时期的价...

    量化投资与机器学习微信公众号
  • 36氪报道:「好雨云」能否成就 Gartner 心中的技术主流?

    Rainbond开源
  • 专家警告:谨防潜藏在AI中的性别歧视

    在巴塞罗那举行的MWC世界移动大会上,有专家在周四发出警告称,如果没有对创建所使用的数据进行监督,人工智能可能会继承人类的偏见,包括性别歧视。 咨询公司Acce...

    机器人网
  • 设计模式学习——代理模式(Proxy Pattern)

    代理模式是常用的结构型设计模式之一,当无法直接访问某个对象或访问某个对象存在困难时可以通过一个代理对象来间接访问,为了保证客户端使用的透明性,所访问的真实对象与...

    饮水思源为名
  • 分页计算页码的主要逻辑

    当使用imap进行读取邮件体的时候,有个函数可以根据传入的开始和结束索引来一次读取多条邮件内容 主要逻辑类似这样,从1开始, 1,10 11,20 ...

    陶士涵
  • JavaScript字符串间的比较

    字符串在JavaScript中几乎无处不在,在你处理用户的输入数据的时候,在读取或设置DOM对象的属性时,在操作cookie时,当然还有更 多…。@雪斌在Jav...

    晚晴幽草轩轩主

扫码关注云+社区

领取腾讯云代金券