<template>
<div>
    {{ isMenuBG }}
</div>

</template>

<script>
export default {
  data() {
    return {
      isMenuBG: false,
      handleScroll(event) {
        const supportPageOffset = window.pageXOffset !== undefined
        const isCSS1Compat = (document.compatMode || '') === 'CSS1Compat'

        const scrollTop = supportPageOffset
          ? window.pageYOffset
          : isCSS1Compat
          ? document.documentElement.scrollTop
          : document.body.scrollTop

        if (!this.isMenuBG && scrollTop > 100) {
          this.isMenuBG = true
        }
        if (this.isMenuBG && scrollTop <= 100) {
          this.isMenuBG = false
        }
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style></style>