addClass removeClass不工作

Question

我第一次在这里问问题。我搜索了很多问题，但找不到类似的问题。

我正在构建一个带有bootstrap3的公司网站。我检查一下，看看最新版本的镀铬和safari是否有效。

我试图让我的肚脐缩小它的高度和改变背景色使用JQuery addClass和removeClass，但它似乎根本不起作用。当我通过JQuery更改CSS属性时，它可以工作。我可以改变背景色。因此，我试图通过Jquery更改多个CSS属性，但无法工作。它只允许我改变背景色。

​

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(window).scrollTop() > 50) {
      $("#top-bar").addClass('animated-header');
    } else {
      $("#top-bar").removeClass('animated-header');
    }
  });

  $("#clients-logo").owlCarousel({
    itemsCustom: false,
    pagination: false,
    items: 5,
    autoplay: true,
  })

}); //this is the part doesn't work

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(window).scrollTop() > 50) {
      $("#top-bar").css("background-color", "#ef7c7c");
    } else {
      $("#top-bar").css("background-color", "transparent");
    }
  });

  $("#clients-logo").owlCarousel({
    itemsCustom: false,
    pagination: false,
    items: 5,
    autoplay: true,
  })
}); //this part works perfectly

#top-bar {
  background: transparent;
  color: #fff;
  -webkit-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
  padding: 30px 0;
  height: 15%;
}
#top-bar .animated-header {
  /*Background Color of nav bar when scrolled*/
  background-color: #ef7c7c;
  padding: 10px 0;
  height: 10%;
  -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
}

<header id="top-bar" class="navbar-fixed-top animated-header">
  <div class="container">

​

非常感谢您的帮助！

Answer 1

CSS代码中有错误：

#top-bar .animated-header
    /*   ^      
        Here the typo, you specified this properties to
        element, that will be a children of a #tob-bar
        element
    */

所以，在这里，正确的一个：

#top-bar.animated-header

Answer 2

问题不在使用.addClass()的JS中，问题是您的CSS中的选择器是错误的。这是：

#top-bar .animated-header {

应该是这样：

#top-bar.animated-header {

也就是说，删除.之前的空格，因为选择器将元素与animated-header类匹配，该类类是#top-bar的后代。如果没有空格，它与#top-bar元素本身匹配，如果它还有animated-header类的话。

Answer 3

最好在css中应用所有的样式。将#top-bar .animated-header更改为#top-bar.animated-header，因为这里有一个额外的空间，导致您的样式没有被应用。但是，如果您真的想使用jQuery应用样式，可以这样做：

$(document).ready(function(){
    $(window).scroll(function () {
        if ($(window).scrollTop() > 50) {
            $("#top-bar").addClass('animated-header').css({'background-color': '#ef7c7c', 'height': '10%'});
        } else {
            $("#top-bar").removeClass('animated-header').css({'background-color': '', 'height': ''});
        }
    });
});

​

$(document).ready(function(){
    $(window).scroll(function () {
        if ($(window).scrollTop() > 50) {
            $("#top-bar").addClass('animated-header');
        } else {
            $("#top-bar").removeClass('animated-header');
        }
    });
});

body {
  height: 1000px;
}
#top-bar {
  background: transparent;
  color: #fff;
  -webkit-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
  padding: 30px 0;
  height: 15%;
}
#top-bar.animated-header {/*Background Color of nav bar when scrolled*/
  background-color: #ef7c7c;
  padding: 10px 0;
  height: 10%;
  -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header id="top-bar" class="navbar-fixed-top animated-header">
            <div class="container">

​