jquery를 사용하여 요소에 지속적으로 클래스가 있는지 확인합니다.

Question

저는 stickyJS를 사용하여 WordPress 웹 사이트에서 끈적한 헤더를 만듭니다. 스크립트를 제대로 대기열에 넣었고 끈적 거리는 것이 완벽하게 작동합니다.

내가 달성하고자하는 것은 끊임없이 내가 끈에 대해 설정 한 nav 요소에 "is-sticky"라는 클래스가 있는지 확인하고 CSS의 일부를 변경하는 것입니다. 여기

내가 이미 가지고있는 코드 :

function stickyInit($) 
{ 
$("#site-navigation").sticky({topSpacing:0}); 

window.setInterval(check_sticky,500); 

function check_sticky(){ 
    if($("#site-navigation-sticky-wrapper").hasClass("is-sticky")){ 
     console.log ("Do Something"); 
    } 
} 
} 

jQuery(document).ready(function ($) { 
stickyInit($); 
}); 

이것은 내가 끈적로 탐색을 설정하는 큐에 한 파일의 모든 코드입니다.

위에서 볼 수 있듯이 setInterval을 사용하여 "# site-navigation-sticky-wrapper"요소를 지속적으로 테스트하여 위에서 언급 한 클래스가 있는지 확인하는 루프를 만들었습니다.

이 코드는 작동하며 콘솔에서 메시지를 받지만 반복적으로 사용하지 않고 한 번만 가져옵니다.

그래서 내 질문은 어떻게 클래스가 "끈적 끈적"인지 확인하기 위해이 요소를 지속적으로 테스트하여 탐색 CSS를 대체 ​​할 수 있습니까?

또한 요소에 "is-sticky"클래스가 설정되어 있지 않을 때 (맨 위로 뒤로 스크롤 한 후) 원래 위치로 돌아가려면 어떻게 설정해야합니까? 또는 어쨌든 그렇게 할 것입니까?

Answer 1

Check this fiddle - '끈적 끈적한'수업이 활성화되었을 때 반복적으로 발생합니다. & 정지 지점까지 스크롤하면 nav 위치가 이전 상태로 자동 복원됩니다.

// Your code 
function stickyInit($){ 

    $("#site-navigation").sticky({topSpacing:0}); 

     function check_sticky(){ 
      if ($("#site-navigation-sticky-wrapper").hasClass("is-sticky")) { 
       console.log ("Do Something"); 
      } 
     } 

    window.setInterval(check_sticky,500); 
} 

jQuery(document).ready(function ($) { 

    stickyInit($); 

});