스크롤 애니메이션 Nav Bar addClass 오류 문의

[김재명]

 

안녕하세요 "스크롤 애니메이션 1 : 스크롤시 변하는 Navbar 만들기" 해당 강읠르 듣는 중 addClass가 작동하지 않아 문의드립니다.

 
<div class="nav-menu nav-black">
        <h4>JCOMAPNY</h4>
        <p id="nav-sub-button">about</p>
    </div>

    <ul class="list-group nav-sub">
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
    </ul>

    <script>
        $(window).on('scroll', function(){
            $('.nav-menu').addClass('nav-black');
            // $('.nav-menu').css('background', 'white');
        });
    </script>
css

.nav-menu {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
    background-color: transparent;
    position: fixed;
    z-index: 5;
    width: 100%;
    color: white;
}

.nav-black{
    background: white;
    color: black;
}

 

위처럼 제대로 코드를 작성했지만 스크롤바를 내려도 절대 색상이 바뀌지 않습니다.

제이쿼리 제대로 설치했음 (맨위, 맨 아래, 중간 전부 다 해봄)
css에 .nav-black 클래스는 맨위 맨 아래 중간 다 해봄

도대체 안되는 이유가 뭘까요? 

 

[codingapple]

콘솔창에 에러가 안뜨면 css 문제같은데 

지금 html에 이미 붙어있는 nav-black 클래스명을 제거합시다 

[김재명]

오 class명에 'nav-black'를 제거하니까 되기는 합니다.

 

다만 아래로 스크롤 내린 후 다시 위로 올리면 원상복구가 되지는 않습니다.

(이정도면 만족)

 

그런데 왜 html class에 'nav-black' 를 삭제하니까 되는걸까요? 

[codingapple]

이미 nav-black이 붙어있는데 

"스크롤 내리면 nav-black 붙여주세요" 라고 코드를 짜서 스크롤내려도 아무 반응이 없는 것입니다 

[글쓴이]

글