Solución:
los sticky-top
es funcionando, pero no parece estar funcionando por dos razones …
- No hay suficiente contenido en el área de contenido principal para desplazarse
- Está posicionado en
top:0
por lo que se esconde detrás de la barra de navegación fija
Agregue CSS para compensar la parte superior de la barra lateral (lo mismo que la altura de la barra de navegación fija).
.sticky-offset {
top: 56px;
}
<ul class="list-group sticky-top sticky-offset">..(sidebar)..</div>
Y luego agregue suficiente contenido (o altura) en el área principal para que sea necesario desplazarse …
Demostración de trabajo: https://www.codeply.com/go/7XYosZ7VH5
<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
..
</nav>
<div class="row">
<div id="sidebar-container" class="sidebar-expanded col-2 d-none d-md-block">
<ul class="list-group sticky-top sticky-offset">
<li>Menu item..</li>
<li>Menu item..</li>
</ul>
</div>
<div class="col">
<!-- MAIN -->
</div>
</div>
Hay una propiedad de posición CSS relativamente nueva llamada sticky
.
position: sticky;
top: 4em;
Vea cómo funciona esto, qué sucede cuando se desplaza hasta el final del elemento principal. Deje la altura en auto
. Referencia: https://developer.mozilla.org/en-US/docs/Web/CSS/position
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)