Bootstrap 4

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">

<div class="navbar">
  some navbar things
</div>
<div class="navbar nav-fixed">
  some navbar things
</div>
<div class="content-ex1"> Some content here</div>
<div class="container">
  <div class="row">
    <div class="col-sm-6 p-sticky"> 
      <div class="menu">menu or something</div>
    </div>
    <div class="col-sm-6 content-ex2"> Some content here</div>
  </div>
</div>

<div class="content-ex1"> Some content here</div>

CSS

body {
  position: relative;
}
/*some attemps*/
.p-relative{
  position:relative;
}
.p-absolute{
  position:absolute;
}
.p-sticky{
  position:sticky;
  top: 60px;
}
.p-fixed{
  position:fixed;
}


/* Standar CSS*/
.navbar{
  background-color: blue;
  width:100%;
}

.nav-fixed{
  top: 0px;
  z-index:1;
  position:fixed;
}
.content-ex1{
  height:200px;
  background-color: green;
}
.content-ex2{
  height:500px;
  background-color: #aaaaaa;
}
.menu{
  height:50px;
  background-color: red;
}