Reiko Kawahara Reiko Kawahara - 4 months ago 26
Javascript Question

addClass removeClass not working

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

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