Question

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

我正在使用Brastets上的bootstrap3建立一个公司网站。我查看是否可以使用最新版本的chrome和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

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

#top-bar .animated-header {

应该是这样的：

#top-bar.animated-header {

也就是说，删除.之前的空格，因为选择器与{em>后代的类animated-header的元素匹配的空间#top-bar。没有空格，如果它还有#top-bar类，则它与animated-header元素匹配。

Answer 2

您的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 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': ''});
        }
    });
});

＆＃13;

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

＆＃13;

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);
}

＆＃13;

<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">

＆＃13;

Answer 4

检查代码段，在你添加css时应该是一个小问题 #top-bar.animated-header代替#top-bar .animated-header

＆＃13;

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

＆＃13;

#top-bar {
    position:fixed;
 top:0;left:0;
  background: transparent;
  color: #fff;
  -webkit-transition: all 0.2s ease-in 0s;
  transition: all 0.2s ease-in 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);
}

＆＃13;

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

＆＃13;

addClass removeClass不起作用

4 个答案: