Vue页面滚动导航吸顶效果

<template>
  <div class="sticky-navbar">
    aaa
  </div>
</template>

<style>
.sticky-navbar {
  overflow: hidden;
  padding: 10px 0;
  transition: 0.4s;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 99;
}
.sticky-navbar.active {
  background-color: #ffffff;
  padding: 0px 10px;
  box-shadow: 0 2px 4px 0 rgba(133,138,180,.14);
}

</style>

<script>
  export default {
    methods: {
      initBrowser () {
        if (process.browser) {
          this.stickyNav(document.querySelector('.sticky-navbar'))
        }
      },
      stickyNav (obj, className = 'active') {
        let ot = obj.offsetHeight
        document.onscroll = function () {
          if (document.body.scrollTop > obj.offsetHeight / 3 || document.documentElement.scrollTop > obj.offsetHeight / 3) {
            obj.classList.add(className)
          } else {
            obj.classList.remove(className)
          }
        }
      }
    },
    mounted () {
      this.initBrowser()
    }
  }
</script>