Comment faire fonctionner la barre de navigation collante à l'intérieur d'autres composants ?

Question

J'ai la structure suivante dans mon projet :

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

La barre de navigation collante ne fonctionne pas car elle ne fonctionne qu'au sein de son composant, comment la faire fonctionner au sein du composant et la maintenir au premier plan.

J'ai essayé de le mettre dans app.component.html mais cela ne fonctionne pas.

Answer 1

HTML organise les composants de l'application dans un conteneur, y compris la barre de navigation de l'application en haut, suivie par d'autres composants. Le remplissage fournit de l'espace pour une barre de navigation collante. Styles CSS app-nav-bar pour la rendre collante sur le dessus, avec couleur d'arrière-plan, texte blanc et remplissage. Il reste fixe pendant le défilement en raison de la 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>