Question

我正在尝试创建一个本地化在div下的标头。当您滚动并且标题到达页面顶部时，它应该＆＃34;保持＆＃34;那里。我正在使用Angular，所以我找到了这个解决方案：Bind class toggle to window scroll event这里我正在使用它来添加类fix-header。在检查器中，我可以看到类被添加，但样式在添加时不适用。这是我修复标题的CSS：

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

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

＆＃34; fix-search＆＃34;这里添加了类：

<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 div。以下是一些有效的代码：https://codepen.io/Martin36/pen/jmbEgJ

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

Answer 1

为什么在添加课程时不会应用样式？

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

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

请注意包装器类和fix-header类之间没有空格

Answer 2

我收录了@Ronnie给出的评论和来自@cnorthfield的答案，并为那些感兴趣的人做了一个更新的笔：https://codepen.io/Martin36/pen/jmbEgJ。当＃＆＃34;虚拟＆＃34;时，标题现在粘在屏幕的顶部。 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;
}

Answer 3

详细说明cnorthfield的回答：

CurrentDB.TableDefs
CurrentDB.QueryDefs
CurrentProject.AllForms
CurrentProject.AllReports
CurrentProject.AllMacros

注意添加/删除单个空格会如何显着改变选择器的含义。

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

3 个答案: