Boostrap - affix top navbar and sidebar together

Question

I have this HTML situation:

 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
   // header navbar
 </div>

 <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
   // Content
 </div>

 <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
   <div class="affix-top" data-offset-bottom="500" data-offset-top="0" 
       data-spy="affix">
        //sidebar
   </div>
 </div>

The sidebar affix correctly. If I try to affix the header navbar the same way it goes down at the same height of the sidebar while scrolling and doesn't stick to the top of the sidebar following it.

I need the navbar and the sidebar to move together and be sticked to the page while content is flowing. Also the navbar should be on foreground. How can I do that?