Styling for CSS class not getting applied when class is added using Angular

Question

I am trying to make a header that is localized under a div. When you scroll and the header reaches the top of the page it should "stay" there. I am using Angular so I found this solution: Bind class toggle to window scroll event here and I am using it for adding the class fix-header. In the inspector I can see that the class gets added but the styling does not apply when it is added. Here is my CSS for making the header fixed:

.wrapper {
  background-color: pink;
  height: 100px;
  z-index: 1;
}

.wrapper .fix-header{
  position: fixed;
  top: 10px;
}

The "fix-search" class is added here:

<body ng-app="myApp">
  <div ng-controller="MyController">
    <div class="banner">
      <div class="dummy-container"></div>
      <div class="wrapper" change-class-on-scroll offset="200" scroll-
           class="fix-header">
      </div>
    </div>
  </div>
 </body>

The line change-class-on-scroll offset="200" scroll-class="fix-header" adds the class fix-header to the wrapper div. Here is some working code: https://codepen.io/Martin36/pen/jmbEgJ

So my question is, why doesn't the class properties get applied when the class is added?

@Ronnie Thank you, now I can see the header when I scroll down. — martin36
– martin36, Commented Apr 17, 2017 at 21:20

cnorthfield · Accepted Answer · 2017-04-17 21:24:02Z

1

Why don't the styles get applied when the class is added?

Because you are referencing the wrong class, your CSS target should be:

.wrapper.fix-header{
  position: fixed;
  top: 10px;
}

Note no space between the wrapper class and the fix-header class

edited Apr 17, 2017 at 21:24

answered Apr 17, 2017 at 21:17

cnorthfield

3,51119 silver badges25 bronze badges

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

1 Comment

martin36 Over a year ago

Yes that was it. Thank you very much.

martin36 · Accepted Answer · 2017-04-17 21:33:32Z

0

I incorporated the comment given by @Ronnie and the answer from @cnorthfield and made an updated pen: https://codepen.io/Martin36/pen/jmbEgJ, for those of you that are interested. The header now sticks to the top of the screen when the "dummy" div is scrolled past. The following changes were made:

/* Since the classes are on the same element there should not be a blank between them */
.wrapper.fix-header{
  background-color: pink;
  height: 100px;
  /* Without the "width" the header disappears */
  width: 100%;
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
}

answered Apr 17, 2017 at 21:33

martin36

2,3734 gold badges22 silver badges31 bronze badges

Comments

nmg49 · Accepted Answer · 2017-04-17 21:42:25Z

0

To elaborate on cnorthfield's answer:

/*Apply style to all elements of both the wrapper class and the fix-header class*/
.wrapper .fix-header
{

}

/*Apply style to all elements which have both the wrapper and fix-header classes*/
.wrapper.fix-header
{

}

Notice how the addition/removal of a single space significantly changes the meaning of the selector.

answered Apr 17, 2017 at 21:42

nmg49

1,4061 gold badge13 silver badges30 bronze badges

Collectives™ on Stack Overflow

Styling for CSS class not getting applied when class is added using Angular

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related