Pues estoy intentando hacer un "manual de uso" o tutorial, mi intención era dejar el navbar superior y el sidebar fijos mientras se desplaza el contenido de al web.
En el navbar muy simple, trabajo con bootstrap y le añado la clase sticky-top, se queda fijo arriba, el problema es que el aside no me hace ni caso intentando lo mismo, no logro saber porqué.
HTML:
spoiler<!-- Sidebar -->
<div class="bg-dark border-right" id="sidebar-wrapper">
<div class="sidebar-heading text-light"><a class="text-light" href="#">Yeti JS </a></div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action bg-dark text-white-50">Dashboard</a>
<a href="#" class="list-group-item list-group-item-action bg-dark text-white-50">Shortcuts</a>
<a href="#" class="list-group-item list-group-item-action bg-dark text-white-50">Overview</a>
<a href="#" class="list-group-item list-group-item-action bg-dark text-white-50">Events</a>
<a href="#" class="list-group-item list-group-item-action bg-dark text-white-50">Profile</a>
<a href="#" class="list-group-item list-group-item-action bg-dark text-white-50">Status</a>
</div>
</div>
<!-- /#sidebar-wrapper -->
CSS:
spoiler.wrapper {
display: flex;
width: 100%;
}
#sidebar {
width: 250px;
top: 0;
left: 0;
height: 100vh;
background: #ffffff;
color: #fff;
transition: all 0.3s;
border-right: 2px solid black;
}
#sidebar.active {
margin-left: -250px;
}
@media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
}
#sidebar-wrapper {
min-height: 100vh;
margin-left: -15rem;
-webkit-transition: margin .25s ease-out;
-moz-transition: margin .25s ease-out;
-o-transition: margin .25s ease-out;
transition: margin .25s ease-out;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
}
#sidebar-wrapper .list-group {
width: 15rem;
}
#page-content-wrapper {
min-width: 100vw;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: 0;
}
@media (min-width: 768px) {
#sidebar-wrapper {
margin-left: 0;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
}
