bootstrap grid system and fixed sidebar - css

Question

I am trying to create bootstrap grid page with two main sections. one is the app content and the other one is side nav bar.
the nav bar is much shorter the the app content itself. what i am trying to accomplish is that whenever i scroll the page, the app side nav bat will always stick to the top of the page (top, not bottom of it)
my code:
<div class="row">
<div class="col-sm-10 col-md-10">
<div class="col-sm-8 col-md-8">
<app-content></app-content>
</div>
<div class="col-sm-4 col-md-4">
<app-side-navbar></app-side-navbar>
</div>
</div>
</div>
whenever i scroll the page, i want to always see on the top right corner the app navbar.
thanks!

Answer 1

this is what solved the issue for me:
<div class="row">
<div class="app-wrapper">
<div class="col-sm-10 col-md-10">
<div class="col-sm-8 col-md-8">
<app-content></app-content>
</div>
<div class="sticky">
<div class="col-sm-4 col-md-4">
<app-side-navbar></app-side-navbar>
</div>
</div>
</div>
</div>
</div>
and the css:
.sticky {
position: sticky;
top:0;
z-index: 999;
}

Answer 2

You can try using the overflow: auto for content wrapper only
<div class="row">
<div class="col-sm-10 col-md-10">
<div class="col-sm-8 col-md-8 content">
<div class='col-md-12 wrapper'>
Content
</div>
</div>
<div class="col-sm-4 col-md-4">
Sidebar
</div>
</div>
</div>
.content {
max-height: 100vh;
overflow: auto;
}
.wrapper {
height: 800px;
}
Let me know for more details

Answer 3

Try use fixed
<div class="row">
<div class="col-sm-10 col-md-10">
<div class="col-sm-8 col-md-8">
<app-content></app-content>
</div>
<div class="nav-sticky">
<div class="col-sm-4 col-md-4">
<app-side-navbar></app-side-navbar>
</div>
</div>
</div>
And in css:
.nav-sticky{
position: fixed;
top: 0;
height: 100%;
overflow:hidden;
}

Answer 4

Add this property to your app container
min-height:100vh;
max-height:100vh;
overflow:scroll;
Give position:fixed to your row.
Added header to my sample as well.
.app {
min-height: 100vh;
max-height: 100vh;
overflow: auto;
background: red;
color: white;
}
.row {
position: fixed;
width: 100%;
}
.header {
height: 50px;
background: blue;
color: white;
}
.navigator {}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 header">HEADER</div>
<div class="col-sm-10">
<div class="col-sm-8 app">
APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>APP CONTENT
</div>
<div class="col-sm-4 navigator">
NAVBAR
</div>
</div>
</div>
</div>