vue实现吸顶header
监听滚动事件实现吸顶
在Vue中可以通过监听页面滚动事件动态修改Header的样式实现吸顶效果。在组件的mounted生命周期中添加滚动事件监听器，当页面滚动超过Header高度时添加固定定位样式。
mounted() {
window.addEventListener('scroll', this.handleScroll)
},
methods: {
handleScroll() {
const header = document.getElementById('header')
const scrollTop = window.pageYOffset || document.documentElement.scrollTop
if (scrollTop > header.offsetHeight) {
header.classList.add('fixed-header')
} else {
header.classList.remove('fixed-header')
}
}
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll)
}CSS固定定位样式
为吸顶Header定义CSS样式，当添加fixed-header类时应用固定定位和过渡效果。
#header {
height: 60px;
background: #fff;
transition: all 0.3s ease;
}
.fixed-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}使用Vue指令封装
可以创建自定义指令v-sticky封装吸顶逻辑，提高代码复用性。
Vue.directive('sticky', {
inserted(el, binding) {
const offset = binding.value || 0
const onScroll = () => {
if (window.scrollY > offset) {
el.classList.add('is-sticky')
} else {
el.classList.remove('is-sticky')
}
}
window.addEventListener('scroll', onScroll)
el._onScroll = onScroll
},
unbind(el) {
window.removeEventListener('scroll', el._onScroll)
}
})使用CSS position:sticky
现代浏览器支持CSS的position: sticky属性实现吸顶效果，无需JavaScript代码。
.sticky-header {
position: sticky;
top: 0;
z-index: 100;
}注意：需要考虑浏览器兼容性，IE11及以下版本不支持该属性。
响应式处理
针对不同屏幕尺寸可能需要调整吸顶阈值或禁用移动端吸顶效果。
handleScroll() {
if (window.innerWidth < 768) return
// 其余吸顶逻辑
}
