EDIT: Mudei um pouco o código devido ao comentário do autor da pergunta. Agora o Menu fica fixo a esquerda, e durando o scroll só as Sessões vão se mover a direita do Menu. Para fixar o Menu basta colocar o position:fixed
assim ele não vai se mover durante o scroll. Já ppara afastar as Sessões e não deixa-las ficar por baixo do Menu basta adicionar nelas um margin-left: 250px;
, onde 250px é equivalente a largura da coluna do Menu.
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
font-family: roboto;
}
.menu {
background-color: #052e40;
width: 200px;
height: 100vh;
text-align: right;
line-height: 50px;
float: left;
/* vertical-align: middle;
display: table-cell; */
display: flex;
align-items: center;
padding-left: 50px;
position: fixed;
}
a {
text-decoration: none;
color: #15b6ff;
}
li {
list-style-type: none;
}
@font-face {
font-family: 'roboto';
src: url('roboto.ttf');
font-weight: normal;
font-style: normal;
}
.menu nav ul li a:hover {
color: white;
}
hr {
color: #15b6ff;
}
.home {
background-color: red;
/* width: 300px; */
height: 100vh;
margin-left: 250px;
}
.home2 {
background-color: green;
/* width: 300px; */
height: 100vh;
margin-left: 250px;
}
<body id="corpo">
<!--Barra lateral/Menu-->
<section id="Barralat">
<div class="menu">
<nav>
<ul>
<li><a href="#">Pagina Inicial</a></li>
<hr>
<li><a href="#">Quem Somos Nós</a></li>
<hr>
<li><a href="#">Cursos</a></li>
<hr>
<li><a href="#">Pré-Matricula</a></li>
<hr>
<li><a href="#">Fale Conosco</a></li>
<hr>
</ul>
</nav>
</div>
</section>
<!--Final da barra lateral/menu-->
<!--pagina inicial-->
<section class="home">
Pagina Inicial
</section>
<section class="home2">
Pagina 2
</section>
</body>