前言

在写h5或者pc站的时候，顶部总会固定一些东西。然后我们会设置顶部的容器为粘性布局固定在顶部。但滚动之后会很僵硬。例如下面这样：

我们看看element的表格的效果：

再来看看最后我们实现的效果：

其实网上也有纯css实现的方案，大概意思就是两个伪元素，底下是阴影，上面是一个空白，滚动的时候空白格移除就显示出了阴影。但我懒得写，突发奇想写了一个自定义指定来实现。其实实现原理很简单，思路大家都知道，无非就是监听滚动添加样式。但总不能每个页面都写吧，代码不复杂，直接分享一下：

具体实现

// 在main.js中注册该指令全局使用
app.directive('scrollShadow', (el) => {
    nextTick(() => {
        const parentScrollTop = el.parentElement.scrollTop
        el.style.transition = 'box-shadow 0.1s ease-in-out';
        if (parentScrollTop > 5) {
            el.style.boxShadow = '0 5px 10px rgba(0,0,0,.12)';
        } else {
            el.style.boxShadow = 'none';
        }
    })
})

在html代码中，设置好你的元素sticky相关属性之后，加上v-scrollShadow就可以生效了

<div class="container" v-scrollShadow></div>

.container{
	position: sticky;
	z-index: 1;
	background-color: #fff;
	top: 0;
}

该写法的缺陷

这个写法只能用于刚开始就在顶部的元素，对于在页面中间的元素会提前展示阴影，接下来我们解决这个问题

代码改进

思路就是在元素挂载的时候拿到距离顶部的距离和距离顶部多少距离sticky生效。优化后代码如下：

app.directive('scrollShadow', {
		 mounted(el) {
            /** 距离顶部多少距离粘性布局生效 */
            const top = parseInt(getComputedStyle(el).top)
            /** 初始化时距离顶部距离 */
            const offsetTop = el.offsetTop
            const updateShadow = () => {
                el.parentElement.addEventListener('scroll', () => {
                    const parentScrollTop = el.parentElement.scrollTop
                    el.style.transition = 'box-shadow 0.1s ease-in-out';
                    const isSticky = parentScrollTop - offsetTop + top > 5
                    el.style.boxShadow = isSticky ? '0 5px 10px rgba(0,0,0,.12)' : 'none'
                })
            }
            nextTick(() => {
                updateShadow()
            })
        },
        unmounted(el) {
            el.parentElement.removeEventListener('scroll');
        }
})

总结

在网上至今没有看过相关的实现方式，今天刷vue文档看到自定义指令突发奇想写了这么一个简单的指令，思路很简单大家可能都知道怎么实现，但论优雅，我还是选指令方式实现