스크롤에 클래스 추가하기

Question

윈도우 스크롤에 active 클래스를 추가하고 스크롤하지 않으면 제거하려고합니다.

나는 여기에이 지침을 따르려고 노력 : jQuery : add css class to menu item based on browser scroller position

그러나, 나는 여전히 뭔가 잘못하고 있어야합니다. 스크롤 할 때 id myCart에 아무 것도 일어나지 않습니다.

나는 다음과 같은 HTML이 :

<div id="myCart" class="active"> 
<div class="add-to-cart"> 
<div class="clearfix qty_ticker"> 
<label for="qty">Qty:</label> 
<span class="marker_qty_left"> </span> 
<input id="qty" class="input-text qty" type="text" title="Qty" value="1" maxlength="12" name="qty"> 
<span class="marker_qty_right"> </span> 
</div> 
<button class="button btn-cart" onclick="productAddToCartForm.submit(this)" title="Add to Cart" type="button"> 
<span> 
<span>Add to Cart</span> 
</span> 
</button> 
</div> 
</div> 

그리고 다음과 같은 자바 스크립트 또는 JQuery와 :

<script type="text/javascript"> 
$(window).scroll(function() {  
    // find the id with class 'active' and remove it 
    $("#myCart").removeClass("active"); 
    // get the amount the window has scrolled 
    var scroll = $(window).scrollTop(); 
    // add the 'active' class to the correct id based on the scroll amount 
    if (scroll <= 500) { 
     $("#myCart").addClass("active"); 
    } 
}); 
</script> 

것은 어떤 도움이 좋을 것을!

Answer 1

자바 스크립트를 컴파일하지 못하게하는 스크립트 끝에 ")"이 없습니다. 둘 다 JQuery와 및 프로토 타입, 프로토 타입과 jQuery의 $ 전역 변수 충돌 $ 전역 변수를 사용하는 경우

코드

<script type="text/javascript"> 
$(window).scroll(function() {  
    // find the id with class 'active' and remove it 
    $("#myCart").removeClass("active"); 
    // get the amount the window has scrolled 
    var scroll = $(window).scrollTop(); 
    // add the 'active' class to the correct id based on the scroll amount 
    if (scroll <= 500) { 
     $("#myCart").addClass("active"); 
    } 
}); 
</script> 

해야한다. 이 문제를 해결하는 한 가지 방법은 jquery의 jQuery 변수를 그대로 사용하는 것입니다.

<script type="text/javascript"> 
var $$ = jQuery; 
$$(window).scroll(function() {  
    // find the id with class 'active' and remove it 
    $$("#myCart").removeClass("active"); 
    // get the amount the window has scrolled 
    var scroll = $$(window).scrollTop(); 
    // add the 'active' class to the correct id based on the scroll amount 
    if (scroll <= 500) { 
     $$("#myCart").addClass("active"); 
    } 
}); 
</script>