Sticky header没有使用Angular5

Question

嗨，你们在我的Angular应用程序中实现一个粘性导航栏时遇到了麻烦。

这是我的应用程序组件：

<div class="master-wrapper"> 
    <div class="master-container">
        <app-online-header></app-online-header>
            <div class="sticky">
                <app-navigation></app-navigation>     
            </div>
        <div class="background">
            <router-outlet></router-outlet>
        </div>
    </div> 
</div>

我的目标是让<app-navigation>组件变得粘稠。这是它的样子：

我到目前为止所做的是在我的app-component CSS文件中：

.sticky{
    position: sticky;
    top: 0;
}

问题：

为什么这不会使我的<app-navigation>组件变粘？

Answer 1

问题是该类在<div>标记中定义。 class="sticky"必须在<nav>组件内放置的<div>或<app-navigation>标签内定义

示例：

HTML代码：

<nav class="sticky">
  <ul class="menu">
    <!-- Insert client logo here -->
    <li class="css_logo">Monte</li>
    <!-- Insert your page navigation here -->
    <li class="css_link"><a [routerLink]="['Concept']" [routerLinkActive]="['active']">Concept</a></li>
    <li class="css_link"><a [routerLink]="['Fusion']" [routerLinkActive]="['active']">Fusion</a></li>
    <li class="css_link"><a [routerLink]="['Home']" [routerLinkActive]="['active']">Home</a></li>
  </ul>
</nav>

CSS代码：

.sticky {
  width: 100%;
  height:72px;
  margin:0;
  left:0;
  right:0;
  top:0;
  background-color: white;
  overflow: hidden;
  display: block;
  position: sticky;
  position: -webkit-sticky;
  z-index: 5;
}

角度ts文件

<!-- Common site Navigation bar -->
<app-navigation-bar></app-navigation-bar>
<!-- Application's Router sequence -->
<router-outlet></router-outlet>