не работает sticky sidebar с bootstrap 3

.fixedsticky { 
	top: 0; 
	position: -webkit-sticky; 
	position: -moz-sticky; 
	position: -ms-sticky; 
	position: -o-sticky; 
	position: sticky; 
} 
 
.main { 
  height: 3000px; 
  border:1px solid #ccc; 
  padding: 1rem; 
} 
 
.sidebar { 
  border:1px solid red; 
  padding: 1rem; 
}

<script src="https://code.jquery.com/jquery.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
  <div class="container-fluid"> 
    <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span>  
      </button> 
      <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">Page 1</a></li> 
        <li><a href="#">Page 2</a></li>  
        <li><a href="#">Page 3</a></li>  
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
      </ul> 
    </div> 
  </div> 
</nav>   
   
  <br> 
  <br> 
  <br> 
  <div class="container"> 
    <div class="row"> 
      <div class="col-xs-3 col-xs-push-9  fixedsticky"> 
        <div class="sidebar"> 
          <p> 
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, repellendus beatae unde quisquam in atque doloremque. Aliquid saepe sint id. 
          </p> 
        </div> 
      </div> 
 
      <div class=" col-xs-9 col-xs-pull-3"> 
        <div class="main"> 
          <p> 
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit sequi, maiores, atque totam esse nemo deserunt eveniet quisquam eligendi accusamus! Deserunt magnam optio ipsum ipsam eveniet harum, quos deleniti blanditiis esse unde voluptas eius soluta expedita consequatur nulla placeat voluptates corporis quaerat officia voluptatem aliquam, aperiam amet totam magni? Saepe minus eaque repellat sed natus. Voluptates facilis, similique porro sequi facere? Iusto officia laudantium eius vel perferendis debitis expedita mollitia consequatur veniam asperiores dolorem reiciendis, id ratione possimus unde nulla, fugit modi eveniet nobis beatae. Reiciendis, vitae cumque placeat culpa at repellendus aperiam nemo quis harum ea itaque maiores reprehenderit. 
          </p> 
        </div> 
      </div> 
    </div> 
  </div> 
   
  <div class="page-footer text-center"> 
    <div class="container"> 
      <div class="col-xs-12"> 
        Footer 
      </div> 
    </div> 
  </div>