addClass removeClass not working

Question

My first time asking question here. I searched through questions but I couldn't find similar problems.

I'm building a corporate website with bootstrap3 on Brackets. I check to see if things work on latest version of chrome and safari.

I'm trying to make my navbar shrink its height and change background color using JQuery addClass and removeClass, but it seems to be not working at all. When I change CSS property via JQuery, it works. I can change the background color. So I tried to change multiple CSS properties via Jquery, it wouldn't work. It only allows me to change 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"> 

Thank you very much for your help!

Answer 1

The problem isn't in the JS using .addClass() , the problem is that the selector in your CSS is wrong. This:

#top-bar .animated-header {

Should be this:

#top-bar.animated-header {

That is, remove the space before the . because with the space the selector is matching elements with class animated-header that are descendants of #top-bar . Without the space it matches the #top-bar element itself if it also has the animated-header class.

Answer 2

You have error in your CSS code:

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

So, here the right one:

#top-bar.animated-header

Answer 3

Its better to apply all styles in css . Change #top-bar .animated-header to #top-bar.animated-header as you have a extra space here causing your styles not being applied. However if you really wants to apply styles using jQuery you can do this:

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

Answer 4

check snippet, a little problem in when you added css it should be #top-bar.animated-header instead of #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>