vue 页面滚动一定距离，头部下拉fixed定位，且显示头部的搜索栏

这里以boss直聘展示的效果为例，页面正常打开显示导航栏及头部，页面向下滚动时，出现固定定位头部，且只有搜索部分。

下方是我微信公众号的二维码，可以扫码关注以下，后期博文推送主要在公众号上面，有什么问题也可以通过公众号跟我发消息哦~

页面打开不下拉时：

页面下滑一定距离时展示效果：

通过监听页面滚动，然后设置样式来控制哪些显示哪些隐藏：

//
<template>
  <div>
    <div :class="{'home-header': true, 'home-header-fixed': show }">
     
        <el-row class="home-picture">  
          <img src="@/assets/images/logo.png" alt />
        </el-row>
        
        <el-row class="home-search">
            <el-input placeholder="请输入内容" v-model="searchWorld"></el-input>
            <el-button type="primary" icon="el-icon-search">搜索</el-button> 
        </el-row>
        
         <el-row class="home-hot">
          <ul class="home-hot-list">
            <li v-for="(item,index) in 5" :key="index">热门列表</li>
          </ul>
        </el-row>
 
    </div>

   
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,    //头部fixed定位判断，动态绑定 class= " home-header-fixed "
      // :class="{'home-header': true, 'home-header-fixed': show }"
    };
  },

  mounted() {
  	// 监听页面滚动事件
    window.addEventListener("scroll", this.showSearch)
  },

  methods: {
    //头部fixed定位
    showSearch() {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop  > 300) {   // 当页面滚动到高度300px处，动态绑定class 来设置头部固定定位
        this.show = true;
      }else {
        this.show = false;
      }
    },
  },
}
</script>

<style lang="less" scoped>

.home-header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: #fff;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 35px 0;
    .home-picture,
    .home-hot {
      display: none;
    }
  }
</style>