使用Angular添加类时未应用CSS类的样式

我试图制作一个本地化在div下的头。当您滚动并且页眉到达页面顶部时，它应该“保持”在那里。我使用Angular，所以我找到了这个解决方案：Bind class toggle to window scroll event在这里，我用它来添加类fix-header。在检查员中，我可以看到班级被添加，但添加样式时不适用。这里是我的制作固定头CSS：使用Angular添加类时未应用CSS类的样式

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

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

“修复搜索”类此添加：

<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>

线change-class-on-scroll offset="200" scroll-class="fix-header"添加类fix-header到wrapper股利。这里有一些工作代码：https://codepen.io/Martin36/pen/jmbEgJ

所以我的问题是，为什么不添加class类时应用类属性？

来源

2017-04-17 martin36

给它一个宽度 – Ronnie

@Ronnie谢谢，现在我可以看到标题，当我向下滚动。 – martin36

为什么样式不适用于添加类时？

因为你引用错误的类，你的CSS的目标应该是：

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

注意包装类和固定头类

来源

2017-04-17 21:17:59 cnorthfield

是的，就是这样。非常感谢你。 – martin36

之间没有空格我引为@给出的评论Ronnie和@cnorthfield的回答，并为你感兴趣的人更新了笔：https://codepen.io/Martin36/pen/jmbEgJ。当“虚拟”div滚动过去时，标题现在粘在屏幕的顶部。以下更改：

/* 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; 
}

来源

2017-04-17 21:33:32 martin36

为了详细说明cnorthfield的回答是：

/*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 
{ 

}

注意如何添加/删除单个空间的显著改变选择的意义。

来源

2017-04-17 21:42:25 nmg49

使用Angular添加类时未应用CSS类的样式

回答

相关问题