0

ウィンドウのスクロール時にクラスを追加し、activeスクロールしていないときにクラスを削除しようとしています。

私はここにあるこれらの指示に従おうとしました: jQuery : add css class to menu item based on browser scroller position

しかし、私はまだ何か間違ったことをしているに違いありません。myCartスクロール時に id に何も起きていません。

私は次の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>

そして、次の javascript または 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>

どんな助けでも素晴らしいでしょう!

4

1 に答える 1

0

スクリプトの最後に「)」がないため、JavaScriptがコンパイルされません。

コードは

<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とprototypeの両方を使用している場合、jqueryの$グローバル変数はprototypes$global変数と競合します。これを修正する1つの方法は、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>
于 2013-01-14T03:14:14.667 に答える