How to put 2 navbar-fixed-top in a single page at different positions

the index.html code is here..

the problem i am getting is that i want the second navbar with class navbar2 to be also fixed in the div class="col-xs-10" itelf so that the content below it can be scrolled easily without moving the navbar 2. the working code is here https://jsfiddle.net/0sqk00Lw/4/ .. can someone help.. thanks in advance

<nav class="navbar navbar-default navbar-fixed-top navbar1">
    <div class="container">
        NAVBAR FIXED TOP
    </div>
</nav>
<div class="row">
    <div class="col-xs-2" style="background-color:blue">
        hello 
    </div>

    <div class="col-xs-10">
        <nav class="navbar navbar-default navbar-static-top navbar2">
           <div class="container">
              NAVBAR FIXED TOP
           </div>
        </nav>
        <p>
        hello<br>
        hello<br>
        hello<br>
        hello<br>
        hello<br>
        hello<br>
        hello<br>
        hello<br>
        hello<br>
        hello<br>
        hello<br>
        hello<br>
        hello<br>
        hello<br>
        hello<br>
        hello<br>
        </p>
    </div>