Wie kann man die Sticky-Navigationsleiste in anderen Komponenten zum Laufen bringen?

Question

Ich habe in meinem Projekt folgende Struktur:

<app-nav-bar></app-nav-bar>
    <app-slider></app-slider>
    <app-solution></app-solution>
    <app-platform></app-platform>
    <app-team></app-team>
    <app-contact></app-contact>
    <app-footer></app-footer>

Die Sticky-Navigationsleiste funktioniert nicht, da sie nur innerhalb ihrer Komponente funktioniert. Wie kann man dafür sorgen, dass sie innerhalb der Komponente funktioniert und sie oben bleibt?

Ich habe versucht, es in app.component.html einzufügen, aber es funktioniert nicht.

Answer 1

HTML在容器中排列应用程序组件，包括顶部的app-nav-bar，然后是其他组件。填充为粘性导航栏提供空间。CSS样式app-nav-bar使其在顶部粘滞，具有背景颜色、白色文本和填充。由于position: sticky;，它在滚动时保持固定。

/* 应用基本样式以确保导航栏占用空间 */
.app-container {
  position: relative;
  padding-top: 60px; /* 根据导航栏的高度调整此值 */
}

/* 粘性导航栏的样式 */
app-nav-bar {
  position: sticky;
  top: 0;
  background-color: #333;
  color: white;
  padding: 10px 0;
  text-align: center;
  z-index: 100; /* 确保导航栏在其他内容之上 */
}

/* 其余组件的样式 */

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="app-container">
  <app-nav-bar></app-nav-bar>
  <app-slider></app-slider>
  <app-solution></app-solution>
  <app-platform></app-platform>
  <app-team></app-team>
  <app-contact></app-contact>
  <app-footer></app-footer>
</div>