吸顶操作vue

吸顶操作vue

<template>
  <div class="main">
      <div class="header">
        <div>头部展示内容-------------</div>
        <div>头部展示内容-------------</div>
        <div>头部展示内容-------------</div>
        <div>头部展示内容-------------</div>
        <div>头部展示内容-------------</div>
        <div>头部展示内容-------------</div>
        <div>头部展示内容-------------</div>
        <div>头部展示内容-------------</div>
        <div>头部展示内容-------------</div>
        <div>头部展示内容-------------</div>
        <div>头部展示内容-------------</div>
        <div>头部展示内容-------------</div>
        <div>头部展示内容-------------</div>
      </div>
      <div class="auto_fixed" :class="auto_fixed">自动粘滞固定头部，需要一直展示的</div>
      <div class="content">
        <div>
          tabs内部内容，最帅程序员专享------
        </div>
        <div>
          tabs内部内容，最帅程序员专享------
        </div>

      </div>
  </div>
</template>
 
<script>
import url from "../../common/api";
export default {
 
  name: 'HelloWorld',
  data () {
    return {
      auto_fixed: {
        fixed: false
      }
    }
  },
  methods: {
    onScroll(){
      let scrolled = document.documentElement.scrollTop || document.body.scrollTop
      let header_height = null
      if(document.getElementsByClassName('header')[0]){
        header_height = document.getElementsByClassName('header')[0].offsetHeight
      }
      // console.log('滚动的距离:'+scrolled,'头部的高度:'+ header_height)
      this.auto_fixed = {
        auto_fixed: true,
        fixed: scrolled >= header_height
      }
    },
    FnknowledgeTags(){
      // url.knowledgeTags({
      //   data:['汽轮机','天然气'],
      //   page:1,
      //   per_page:6,//每页显示条数
      // }).then(res=>{
      //   console.log(res,'-------knowledgeTags标签选择')
      // }).catch(err=>{
      //   console.log(err,'-------knowledgeTags标签选择catch')
      // })
      
      // url.newsTags({
      //   data:['汽轮机','天然气'],
      //   page:1,
      //   per_page:6,//每页显示条数
      // }).then(res=>{
      //   console.log(res,'-------newsTags标签选择')
      // }).catch(err=>{
      //   console.log(err,'-------newsTags标签选择catch')
      // })
      url.knowledgeItemTags({
        data:['压力容器','天然气']
      }).then(res=>{
        console.log(res,'-------knowledgeItemTags')
      }).catch(err=>{
        console.log(err,'-------knowledgeItemTags的catch')
      })
      url.newsItemTags({
        data:['压力容器','天然气']
      }).then(res=>{
        console.log(res,'-------newsItemTags')
      }).catch(err=>{
        console.log(err,'-------newsItemTags 的catch')
      })
    }
  },
  mounted(){
    this.$nextTick(function () {
      window.addEventListener('scroll', this.onScroll)
    })
    this.FnknowledgeTags()
  }
 
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .main{
 
  }
  .header{
    padding: 8px 10px;
  }
  .auto_fixed{
    height: 3em;
    background: orange;
    line-height: 3em;
    text-align: center;
  }
  .fixed{
    position: fixed;
    top: 0px;
    width: 100%;
  }
  .content{
    color: gray;
    padding: 8px;
  }
 
</style>