nuke
10
2020-05-23 20:58:27
0
101

[Vue.js + fullpage.js] 스크롤 시에 메뉴부분 스타일 적용 질문드립니다.


안녕하세요

메뉴를 클릭하면 사진처럼


핑크색으로 변하고 해당 페이지로 이동합니다.

현재 상황은 스크롤 올렸다 내렸다를 해서 다른 페이지로 가도 Project에 핑크색이 그대로 남아있는데

각 페이지에 맞게 메뉴의 핑크색이 없어졌다 사라졌다 해보고 싶은데 어떻게 해야할 지 몰라서 질문합니다.


Main.vue

<template>
  <div>
    <v-navigation-drawer nav app floating>
      <!-- <ad-page></ad-page> -->
      <menu-bar  />
    </v-navigation-drawer>
    <v-container fluid>
      <full-page :options="options" id="fullpage" fluid>
        <div class="section" v-bind="user">
          <intro-page :userInfo="user[0].name" />
        </div>
        <div class="section" v-bind="user">
          <about-page :userInfo="user" />
        </div>
        <div class="section" v-bind="skill">
          <skill-page :skillInfo="skill" />
        </div>
        <div class="section" v-for="(project, index) in projects" :key="index">
          <project-page :projectInfo="project" />
        </div>
      </full-page>
    </v-container>
  </div>
</template>

<script>
import MenuBar from "@/components/MenuBar.vue";
// import AdPage from "@/components/AdPage.vue"
import IntroPage from "@/components/IntroPage.vue";
import AboutPage from "@/components/AboutPage.vue";
import SkillPage from "@/components/SkillPage.vue";
import ProjectPage from "@/components/ProjectPage.vue";

export default {
  name: "Main",
  components: {
    MenuBar,
    // AdPage,
    IntroPage,
    AboutPage,
    SkillPage,
    ProjectPage
  },
  data() {
    return {
      options: {
        anchors: ["About", "Contact", "Skill", "Project"],
        autoScrolling: true,
      }
    };
  },
  async created() {
    await this.$store.dispatch("CREATE_PERSONAL_INFORMATION");
  },
  computed: {
    color() {
      return "color: pink";
    },
    user() {
      return this.$store.getters.getPersonalInformation;
    },
    skill() {
      return this.$store.getters.getTechnologyStack;
    },
    projects() {
      return this.$store.getters.getProject;
    }
  }
};
</script>

MenuBar.vue

<template>
  <v-card flat id="menu">
    <v-list>
      <v-list-item-group  color="pink">
        <v-list-item
          v-for="(item, index) in items"
          :key="item.title"
          :href="link[index]"
          activator
          class="overflow-y-auto"
        >
          <v-list-item-icon>
            <v-icon v-text="item.icon" />
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title v-text="item.title"
              ><a v-bind:href="link[index]"></a
            ></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-card>
</template>

<script>
export default {
  data() {
    return {
      drawer: true,
      items: [
        { title: "About", icon: "mdi-help-box" },
        { title: "Contact", icon: "mdi-phone" },
        { title: "Skill", icon: "mdi-gavel" },
        { title: "Project", icon: "mdi-folder-pound" }
      ],
      link: ["#About", "#Contact", "#Skill", "#Project"],
      right: false,
      permanent: true,
      miniVariant: false,
      expandOnHover: false,
      background: false
    };
  },
  computed: {
    bg() {
      return this.background
        ? "https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg"
        : undefined;
    }
  }
};
</script>

<style scoped>
a {
  text-decoration: none;
}
#menu {
  position: fixed;
  z-index: 99;
  top: 30%;
  left: 20%;
}
</style>


현재 스크롤을 내리면 각각의 페이지가 나오게 되는데

메뉴의 경우 클릭했을 때만 핑크색으로 변하게 됩니다.

0
0
  • 답변 0

  • 로그인을 하시면 답변을 등록할 수 있습니다.