sticky

by jpeter06

HTML

<div  class="grid_nav">
NAV 
</div>
<div class="grid_menu">
MENU

MENU
MENU 
MENU
MENU
MENU 
MENU
MENU
</div>
<div class="grid_router">
   <div class="contenido">
   RUTER
   </div>
</div>

CSS

html, body{
  padding:0px;  margin:0px;
  overflow:hidden;
  width:100%;  height:100%;
}

body{ 
overflow-y:auto;  display: grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:   auto 1fr;
    grid-template-areas: "nav nav"
                         "menu router";
}

.grid_menu{ grid-area: menu; width:20vh;
position:sticky;top:20px;left:0; 
background: yellow;  overflow-y: auto;}
.grid_nav{ grid-area: nav;background: #f8fffb; position:sticky; top:0; left:0 }
.grid_router {  grid-area: router; padding:1rem;
 box-shadow: inset 0 0 8px #99acc1;
  background: #f8fbff;    box-shadow: inset 0 0 8px #99acc1;}

.contenido { height:300%; background:red;}