[Vue] 스크롤 시 헤더 색 변경

1. 먼저 data에 scrollPosition을 null값으로 넣어준다.

2. updateScroll()이라는 메소드를 통해 현재 윈도우의 스크롤 위치를 scrollPosition에 저장한다.

3. mounted를 통해 위의 updateScroll()이 발생하도록 한다.

4. 해당하는 div에 2가지 조건을 넣는다.

5. <style>에 조건 별로 어떻게 다르게 보일지 스타일한다.

<template>
    <div :class="{original_color: scrollPosition < 100, change_color: scrollPosition > 100}">
        <p class="h-title">제목</p>
    </div>
</template>

<script>
export default {
    name: 'Header',
    data(){
        return{
            scrollPosition: null
        }
    },
    methods: {
        updateScroll(){
           this.scrollPosition = window.scrollY
        }
    },
    mounted(){
        window.addEventListener('scroll', this.updateScroll);
    },
}
</script>

<style>

.original_color {
    position: fixed;
    background-color: black;
    width: 100%;
    height: 100px;
    top: 0;
    border-bottom: 1px solid #EBEBEB;
}

.change_color {
    position: fixed;
    background-color: white;
    width: 100%;
    height: 100px;
    top: 0;
    border-bottom: 1px solid #EBEBEB;
}

</style>