動的クラスにposition: fixed;を設定するとtopに戻る

実現したいこと

ハンバーガーメニューを押し、グローバルメニューが表示された時にスクロールできないようにしようと思い、動的クラスをつけ、position: fixed;を設定しました。スクロールの無効化はできましたが、topに戻ってしまいます。これをtopに戻さずそのままの状態で背景を固定したいです

具体的にどんな施策が考えられるでしょうか

activeクラスがついてる間は、スクロールできないという状態を想定しています

App.vue

Vue
1<template>
2  <div id="app" :class="{ active: isActive }">
3    <Header @fixed="changeActive" ></Header>
4    <router-view/>
5  </div>
6</template>
7
8<script lang="ts">
9import Vue from 'vue'
10import Header from '@/components/Header.vue'
11export type DataType = { isActive: boolean }
12export default Vue.extend({
13  components: {
14    Header
15  },
16  data(): DataType{
17    return {
18    isActive: false
19    }
20  },
21  methods: {
22    changeActive() {
23      this.isActive = !this.isActive
24    },
25  }
26})
27</script>
28<style>
29body {
30  margin: 0;
31}
32.active {
33  position: fixed;
34}
35#app {
36  font-family: Avenir, Helvetica, Arial, sans-serif;
37  -webkit-font-smoothing: antialiased;
38  -moz-osx-font-smoothing: grayscale;
39  text-align: center;
40  color: #2c3e50;
41}
42</style>
43

Header.vue

Vue
1<template lang="pug">
2    .head
3        .header
4            NAV(:aa="clickHumb")
5            img.logo(src="../assets/hobo_logo.svg" alt="logo") 
6        .humb(@click="openMenu")
7            .first-line
8            .last-line
9</template>
10<script lang="ts">
11import Vue from 'vue'
12import NAV from '@/components/Nav.vue'
13
14export type DataType = { clickHumb: boolean }
15export default Vue.extend({
16    data(): DataType {
17        return {
18            clickHumb: false
19        }
20    },
21    components: {
22        NAV
23    },
24
25    methods: {
26        openMenu() {
27            this.clickHumb = !this.clickHumb
28
29            if (this.clickHumb === true){
30            this.$emit('fixed')
31            }
32        }
33    }
34})
35</script>
36
37<style scoped>
38.head {
39    height: 60px;
40}
41.header{
42    position: relative;
43    width: 100%;
44}
45.header:hover > .logo{
46    opacity: 0.7;
47}
48.logo{
49    width: 150px;
50    margin-top: 5px;
51    margin-bottom: 5px;
52    transition: opacity 0.4s;
53}
54.humb{
55    width: 35px;
56    display: inline-block;
57    position: fixed;
58    top: 10px;
59    right: 10px;
60    padding-top: 20px;
61    padding-right: 20px;
62    padding-bottom: 10px;
63}
64.humb:hover > .first-line{
65    transform: translateY(3px);
66}
67.humb:hover > .last-line{
68    transform: translateY(7px);
69}
70.first-line {
71    border-bottom: 2px solid dimgray;
72    margin-bottom: 13px;
73    transition: all 0.5s;
74    
75}
76.last-line {
77    border-top: 2px solid dimgray;
78    transition: all 0.5s;
79}
80</style>