横スクロール追従ヘッダーコンポーネント

headerContent.vue

<template lang="pug">
header.header(:style="{left: headerScroll}")
  .header__contents
</template>

<script>
export default {
  name: "headerContent",
  data: function() {
    return {
      headerScroll: 0,
    };
  },
  mounted: function() {
    window.addEventListener("scroll", this.handleScroll, false);
  },
  beforeDestroy: function() {
    window.removeEventListener("scroll", this.handleScroll, false);
  },
  methods: {
    handleScroll: function() {
      this.headerScroll = -window.scrollX + "px";
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 1000px;
}
</style>