需求：头部搜索模块默认如下图1，但是当滚动条移动到下方看不见导航栏时，需要将搜索模块简化并吸附到顶部如下图2
图1：
图2：
解决方案：监听滚动事件，通过给搜索模块顶级元素增减class来切换样式
html和css:
<!--isFixed默认未false,如果滚动监听触发事件使得isFixed为true的话，就添加class is-fixed 吸附到顶部，监听触发为false则返回还完原来的class no-fixed-->
<div id="boxFixed" :class="[isFixed ? 'is-Fixed' : 'no-fixed']">
这个是要滚动到顶部吸附的元素
</div>
<style rel="stylesheet" lang="css">
.no-fixed{
//这里写默认的样式}
.is-Fixed{
//这里是吸附顶部的样式
100%;
background-color: #fff;
z-index: 100;
position: fixed;
top: 0;
}
</style>
js方法:通过scroll监听页面滚动
data: function() {
return {
isFixed:false //默认为false
}
mounted(){
window.addEventListener('scroll',this.handleScroll) // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
},
handleScroll(){
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量
let offsetTop = document.querySelector('#boxFixed').offsetTop; // 要滚动到顶部吸附的元素的偏移量
this.isFixed = scrollTop > offsetTop+100 ? true : false; // 如果滚动到了预定位置，this.isFixed就为true，否则为false
}