CODEWITHSUNDEEP
javascriptjquerycss
Karolis Beliašas
Karolis Beliašas

Reputation: 63

After javascript addclass it adds class but css property not working

Can please someone help me?

Here .header-line after scroll has an additional class of .header-line .active but css can't see it and doesn't change the background-color. You can see my css and there .header-line .active is with background-color property. Why is my background still transparent?

CSS:

.header-line {
  width: 100%;
  height: 60px;
  background-color: rgba(255,255,255,0.00);
}
.header-line .active {
  background-color: white;
}

header:

<div class="header-line">header</div>

Javascript:

$(function() {
  $(window).on("scroll", function() {
    if($(window).scrollTop() > 50) {
      $(".header-line").addClass("active");
    } else {
      //remove the background property so it comes transparent again (defined in your css)
      $(".header-line").removeClass("active");
    }
  });
});

Upvotes: 0

Views: 2521

Answers (2)

Deep
Deep

Reputation: 9794

Declare the css like this in your bootstarp.css

.header-line.active {
background-color: white;
}

Upvotes: 0

Arathi Sreekumar
Arathi Sreekumar

Reputation: 2584

That is because in your css file you have .header-line .active { ... }, and that means .active class inside .header-line class.

You should change that to .headerline.active { ... } (remove the space)

Upvotes: 6

Related Questions