Way to make sticky navigation bar work inside other components?
P粉579008412
2023-08-15 10:42:23
<p>I have the following structure in my project: </p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>The sticky navigation bar is not working as it only works within its component, how to make it work within the component and keep it on top. </p>
<p>I tried putting it in app.component.html but it doesn't work. </p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
HTML arranges application components in a container, including app-nav-bar on top, followed by other components. Padding provides space for a sticky navigation bar. CSS styles app-nav-bar to make it sticky on top, with background color, white text and padding. It stays fixed while scrolling due to 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; /* 确保导航栏在其他内容之上 */ } /* 其余组件的样式 */