After javascript addclass it adds class but css property not working

Question

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

please edit and paste relevant code here. It is not possible to debug from webpage — brk
– brk, Commented Jun 20, 2016 at 15:45
Please include any relevant markup, JavaScript and CSS in your question, see: Something in my web site or project doesn't work. Can I just paste a link to it? — James Thorpe
– James Thorpe, Commented Jun 20, 2016 at 15:45

Arathi Sreekumar · Accepted Answer · 2016-06-20 15:46:52Z

6

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)

answered Jun 20, 2016 at 15:46

Arathi Sreekumar

2,5841 gold badge19 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KWallace Over a year ago

Not sure why the question got voted down. It's a perfectly valid question, representing the same problem I came here to find an answer for, and with this answer, I found it. SO's voting system is irreversibly broken, IMO. Thanks! This solved the same problem for me.

Deep · Accepted Answer · 2016-06-20 15:53:44Z

0

Declare the css like this in your bootstarp.css

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

answered Jun 20, 2016 at 15:53

Deep

9,7962 gold badges24 silver badges34 bronze badges

Collectives™ on Stack Overflow

After javascript addclass it adds class but css property not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related