Geek Answers Handbook

AddClass removeClass not working

My first question asked here. I looked through questions, but could not find similar problems.

I am creating a corporate website with bootstrap3 in brackets. I check if chrome and safari work on the latest version.

I am trying to get my navbar to compress its height and change the background color using jQuery addClass and removeClass, but it doesn't seem to work at all. When I change the CSS property through jQuery, it works. I can change the background color. So I tried to change some CSS properties using jQuery, this will not work. This allows me to change the background color.

$(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">
Run codeHide result

Many thanks for your help!

+4
source share
4

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
+4

JS, .addClass(), , CSS . :

#top-bar .animated-header {

:

#top-bar.animated-header {

, ., animated-header, #top-bar. #top-bar, animated-header.

+9

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">
Hide result
+1

, , css, #top-bar.animated-header #top-bar .animated-header

$(document).ready(function() {
 $(window).scroll(function () {

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


});
#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);
}
<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>
Hide result
+1

More articles:


All Articles