如何使用JS添加和删除CSS类

时间:2017-02-10 21:23:15

标签: javascript php jquery css

我无法理解为什么这段代码无法正常运行:

$(document).ready(function() {
  $(window).scroll(function() {
    console.log($(window).scrollTop())
    if ($(window).scrollTop() < 626) {
      $('#shop-cart').addClass('shopcart-hidden').removeClass('shopcart-fixed');
    }
    if ($(window).scrollTop() > 625) {
      $('#shop-cart').removeClass('shopcart-hidden').addClass('shopcart-fixed');
    }
  });
});

这个想法是在页面加载时隐藏购物车信息,并仅在用户向下滚动时显示它。如果用户向上滚动,则应再次隐藏信息。 我有id-shop-cart和一些php代码的div,我也在style.css中定义了CSS类:

#shop-cart {
  background:#757575;
}
.shopcart-fixed {
  float:right;
  right:0;
  z-index:100;
  position:fixed;
}
.shopcart-hidden {
  display:none;
}

2 个答案:

答案 0 :(得分:2)

默认情况下使用CSS隐藏栏,然后您只需要一个可以切换的类,一旦您传递了指定的scrollTop(),就会将其显示为已修复。

$(document).ready(function() {
  $shopCart = $('#shop-cart');
  $(window).scroll(function() {
    var $scrollTop = $(window).scrollTop();
    if ($scrollTop < 626) {
      $shopCart.removeClass('shopcart-fixed');
    }
    if ($scrollTop > 625) {
      $shopCart.addClass('shopcart-fixed');
    }
  });
});
body {
  min-height: 500vh;
}
.shop-cart {
  background:#757575;
  display: none;
}
.shopcart-fixed {
  right:0;
  z-index:100;
  position:fixed;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shop-cart" class="shop-cart">shop-cart</div>

答案 1 :(得分:0)

jQuery.toggleClass有第二个参数,告诉他们删除类或添加它。您可以像这样使用它:

$(document).ready(function() {
    $(window).scroll(function() {
        var scrollTest = ($(window).scrollTop() < 625); // will be true or false
        $('#shop-cart').toggleClass('shopcart-hidden', scrollTest); // will add if scrollTest is true, remove otherwise
        $('#shop-cart').toggleClass('shopcart-fixed', !scrollTest); // will add if scrollTest is false, remove otherwise
    });
});

注意:为什么你使用两个班级来做一些只能用一个班级做的事情?只需将一个类的CSS作为默认值,然后在设置另一个类时覆盖该CSS。