vue滚动固定顶部及修改样式的实例代码

下面是关于“vue滚动固定顶部及修改样式的实例代码”的完整攻略：

一、思路梳理

本文实例通过自定义指令来实现 vue 滚动固定顶部及修改样式的效果，核心步骤如下：

1. 在指令 bind 钩子中获取当前元素的 offsetTop 和 scrollTop，记录在对象中。
2. 在指令 inserted 钩子中添加滚动事件，判断当前元素是否到达顶部，如果到达顶部则设置该元素的 position 为 fixed，top 设置为 0。
3. 在指令 unbind 钩子中移除该指令所绑定的事件。

二、实现代码

1. 自定义指令实现

// 指令名为vueFixed
Vue.directive('vueFixed', function (el, binding) {
  const fixedCls = binding.value.fixedCls || 'fixed-top' // 固定后的样式名，支持传参自定义
  let originTop = el.offsetTop // 元素距离页面顶部的高度
  let originScrollTop = 0 // 滚动距离

  window.addEventListener('scroll', fixed, true)

  function fixed() {
    originScrollTop = document.documentElement.scrollTop || document.body.scrollTop
    if (originScrollTop >= originTop) {
      el.style.position = 'fixed'
      el.style.top = '0'
      el.classList.add(fixedCls)
    } else {
      el.style.position = 'static'
      el.style.top = null
      el.classList.remove(fixedCls)
    }
  }

  el.addEventListener('unbind', function () {
    window.removeEventListener('scroll', fixed, true)
    el.removeEventListener('unbind', arguments.callee)
  })
})

2. 组件调用示例

<template>
  <div>
    <!-- 示例一：固定顶部并且设置样式 -->
    <div v-vueFixed="{fixedCls:'fixed-top-style'}">我是需要固定的元素</div>

    <!-- 示例二：固定顶部，无需修改默认样式，两种写法相同 -->
    <div v-vueFixed>我是需要固定的元素</div>
  </div>
</template>

<script>
export default {
  name: 'Demo',
  data() {
    return {}
  }
}
</script>

<style>
.fixed-top { /* 滚动固定时的样式 */ }
.fixed-top-style { /* 滚动固定时的样式 */ }
</style>

三、示例说明

示例一：

如上代码所示，通过给 vueFixed 指令传入 fixedCls 参数值 ‘fixed-top-style’，即可自定义固定后的样式。

也就是说，当该元素开始滚动固定时，新添加的 class 为 ‘fixed-top-style’，这时候可以通过 CSS 来修改滚动固定时元素的样式。

示例二：

如上代码所示，如果没有传入 fixedCls 参数值，则使用默认的样式。

此时，滚动固定时的样式不需要额外进行设置，而是默认的样式。