offcanvas-sidebar bootstrap 4 sticky sidebar - sidebar

Question

hi i recenty used the bootstrap 4 offcanvas template to build my website
http://v4-alpha.getbootstrap.com/examples/offcanvas/#
now i want to make my side-bar follow as the users scrolls but bootstrap removed the affix class and recommends using css position sticky. I tried to do this and target the sidebar but it screws up the layout. targeting the .nav doesnt work either
Html
<div class="container-fluid header navbar-fixed-top">
<div class="row">
<div class="hidden-md-up col-xs-2">
<button type="button" class="btn btn-secondary" data-toggle="offcanvas"><i class="fa fa-bars"></i></button>
</div>
<div class="col-md-12 col-sm-8 col-xs-8">
<img src="images/logo.gif" class="img-fluid center-block" alt="emblem">
</div>
</div>
</div><!-- /HEADER -->
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-md-2 col-sm-2 col-xs-4 sidebar-offcanvas" id="sidebar">
<ul class="nav nav-stacked">
<li class="nav-item">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#area">Locations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#deals">Deals</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
</ul>
</div><!-- /Navigation -->
<section id="home">
<div class="row">
<div class="col-md-6 col-md-offset-5 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">
<img src="images/mazda2.gif" alt="Mazda2" class="img-fluid center-block">
</div>
<div class="col-md-6 col-md-offset-5 col-xs-12 text-xs-center">
<h3>Perth, Western Australia</h3>
</div>
</div>
</section><!-- HOME -->
<section id="about">
<div class="about-me">
<h3>About Us</h3>
</div>
</section><!-- ABOUT -->
</div><!--ROW -->
</div><!-- CONTAINER-FLUID -->
CSS
/*
* Style tweaks
* --------------------------------------------------
*/
html,
body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
padding-top: 7em;
position: relative;
}
/*
* Off Canvas
* --------------------------------------------------
*/
#media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-right {
right: 0;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -33%; /* 4 columns */
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -33%; /* 4 columns */
}
.row-offcanvas-left.active {
left: 33%; /* 4 columns */
}
.row-offcanvas-right.active {
right: 33%; /* 4 columns */
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 33%; /* 4 columns */
}
}
/*
* Custom Style
* --------------------------------------------------
*/
#sidebar {
background-color: white;
position:absolute;
height:100vh;
}
.header {
background-color: #232323;
}
.btn-secondary {
background-color: #232323;
border-color: #232323;
margin-top:0.3em;
}
/*
* HOME
*/
#home {
background-color: #434343;
height: 100vh;
width: 100vw;
}
It probably got something to do with my sidebar-off canvas and sidebar position. But without mysidebar position absolute my section contents gets pushed down. I triedremoving itandusing col-x-x class but no go :(

Answer 1

i think you should use:
#media screen and (min-width: 768px) {
.sidebar-offcanvas .nav-stacked {
position: fixed;
top: 8em;
width: 33%;
}
}
Read more about position: fixed at: Affix is not working in Bootstrap 4 alpha