::before 가상 선택된 클래스에 addclass해서 배경바꾸기

조회수 828회

이미지가 스크롤 되면. id=mainoffset 가 심어져 있는 곳 이후에서

      .aa::before {
      content:' ';
      display: block;
      background-color:#000;
      background-image:url('../img/main/01.jpg');
      background-position: center;
      height: 100vh;
      width: 100vw;
      margin:0 auto;
      max-width:640px;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      position: fixed;
      z-index: -10; 
}

로 깔아놓은 배경을 바꾸려고

새로운 클래스명인

.aa2{
      content: ' ';
      display: block;
      background-color:#3e3d3c;
      background-image:url('../img/main/02.jpg');
      background-repeat: no-repeat;
      background-position: center;
      height: 100vh;
      width: 100vw;
      margin:0 auto;
      max-width:640px;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      position:fixed;
      z-index: 0; 
}

을 넣고

js에서

function changeMain(){

 //윈도우창에서 스크롤바가 동작하면
 $(window).scroll(function(){

  //mainOffset 위치값을 변수에 저장함.
  var nowPos = $('#mainOffset').offset().top; //좌표값 top:()일때
  //scrollTop();은 scroll시 위치의 pixel값을 알 수 있게 해주는     
  var scrollPos = $(window).scrollTop();//현재 스크롤값을 변수에 저장

  if(scrollPos > nowPos){ 

            $('.aa').addClass('aa2');
        }
     });

}

되게 하였는데 이미지가 않바꾸고 기존 상태 그대로 있네요

실수로
폴더를 삭제하고 다시 복구 중인데

분명히 기억에 이렇게 썼을 때 맞았던 것 같은데
안되서 미치겠어요 퇴근해야 하는데 도와주세요

1 답변

  • .aa2 말고 .aa2:before를 정의하셔야 될걸요? 그 다음 .addClass('aa2').removeClass('aa')로 쓰셔야 할겁니다.

    설명: 엎어치고자 하는 대상이 :before 유사속성이므로 엎어치는 데 쓸 정의도 :before 유사속성에 관한 것이어야 합니다. 그리고 지금 클래스를 추가하는 게 아니라 교체를 하기 원하시는 것이므로 그냥 .aa2 클래스를 덧붙이기만 해서는 원하는 동작을 안할 가능성이 크니 기존의 .aa를 빼줘야 합니다.

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)