Estoy haciendo una pagina web para moviles con la siguiente estructura en Angular:
La idea es que la navbar permanesca en su sitio es decir, en el top aunque se dezplace uno en la pagina, es decir solo se haria scroll en las secciones del router outlet, sin embargo esto no pasa asi cuando dezplazo hacia abajo, la navbar se va con el resto y no se queda, ya intente a mano y con bootstrap, y nada
en app-navbar-landing
cargo una navbar responsive con la propiedad fixed-top todo con bootstrap, mientras que en el router-outlet
cargo mis distintos componentes dependiendo la navbar, esto si funciona el problema es que quiero que se quede fija cuando doy scroll pero se oculta o mas bien se queda arriba, la pagina que cargo es la siguiente:
<div class="contenedor">
<div class="lobby">
<div class="video"></div>
<div class="lobby-title" data-aos="zoom-in-up">Titulo</div>
</div>
<div class="links">
<div class="box" data-aos="fade-right">
<div class="img"></div>
<div class="title">opcion a </div>
</div>
<div class="box" data-aos="fade-left">
<div class="img"></div>
<div class="title">opcion b</div>
</div>
</div>
mis estilos principales son estos:
.contenedor{
margin-top: 60px;
width: 100%;
}
.lobby{
background-color: rgba(0, 0, 0, 0.36);
width: 100%;
height: calc(100vh - 60px);
display: flex;
align-items: center;
justify-content: center;
}
Y mi navbar en el otro lado es este:
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
Si acaso modifique la altura de nav
a 60px, no entiendo que pasa no se si choca algun otro estilo o que