Saltar al contenido

Bootstrap 4 navegación superior fija y barra lateral fija

Solución:

los sticky-top es funcionando, pero no parece estar funcionando por dos razones …

  1. No hay suficiente contenido en el área de contenido principal para desplazarse
  2. 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)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *