Disable Scroll in Relation to Overlay

Question

Goal:
When you click on the picture a overlay should display and the scroll should not affect the user interface.

Problem:
When the page is long and you disable the scroll the content of the page in relation to overlay will be moved towards to the right side. When you have many picture, it will not be very user-friendly.

I have tried the solution from this page and this page but they doesn't work in relation to this source code below.

I also have tried this page but it did't work at all. This link as a proposal. jsbin.com/poyejulijo/edit?html,output

I have tried different solution but I failed.

Info:
*Using jQuery and Bootstrap v.3
*The overlay with scroll should be working in relation to the latest version of IE, FF and Chrome.

function openNav(a) {
    document.getElementById("myNav").style.width = "100%";
       
    var p = document.getElementById("p1");
 p.src = a.getElementsByTagName('img')[0].src;
 
    var d = document.getElementById("div12");
 d.innerHTML = d.innerHTML + 'sdfsdf';
 
 document.body.classList.add("noScroll");
}

function closeNav() {
    document.getElementById("myNav").style.width = "0%";

 document.body.classList.remove("noScroll"); 
}

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.7);
    overflow-x: hidden;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;

}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

body.noScroll { /* ...or body.dialogShowing */
  overflow: hidden;
}





@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>




 <div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
   <img id="p1" src="" />
   <div id="div12">
   </div>
  </div>
 </div>


    <nav class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
   <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
     <span class="sr-only">Toggle navigation</span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Project name</a>
   </div>
   <div id="navbar" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#about">About</a></li>
     <li><a href="#contact">Contact</a></li>
    </ul>
   </div><!-- /.nav-collapse -->
  </div><!-- /.container -->
    </nav><!-- /.navbar -->

    <div class="container">

  <div class="row row-offcanvas row-offcanvas-right">

   <div class="col-xs-12 col-sm-9">
    <p class="pull-right visible-xs">
     <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
    </p>
    <div class="jumbotron">
     <h1>Hello, world!</h1>
     <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
    </div>
    <div class="row">
     <div class="col-xs-6 col-lg-4">
      <h2>Heading</h2>
      <p>
       <div style="font-size:30px;cursor:pointer" onclick="openNav(this)">
        <img src="http://www.partycity.com/images/products/en_us/gateways/candy-2015/candy-by-type/candy-by-type-lollipops.jpg"  />
       </div>
       <br />
       <br />
       <br />
       <br />
       <br />

       <img onclick="openNav(this)" src="http://www.partycity.com/images/products/en_us/gateways/candy-2015/candy-by-type/candy-by-type-lollipops.jpg"  />
      </p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
     </div><!--/.col-xs-6.col-lg-4-->
    </div><!--/row-->
   </div><!--/.col-xs-12.col-sm-9-->

   <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
    <div class="list-group">
     <a href="#" class="list-group-item active">Link</a>
     <a href="#" class="list-group-item">Link</a>
     <a href="#" class="list-group-item">Link</a>
     <a href="#" class="list-group-item">Link</a>
     <a href="#" class="list-group-item">Link</a>
     <a href="#" class="list-group-item">Link</a>
     <a href="#" class="list-group-item">Link</a>
     <a href="#" class="list-group-item">Link</a>
     <a href="#" class="list-group-item">Link</a>
     <a href="#" class="list-group-item">Link</a>
    </div>
   </div><!--/.sidebar-offcanvas-->
  </div><!--/row-->

  <hr>

  <footer>
  <p>&copy; 2016 Company, Inc.</p>
  </footer>

    </div><!--/.container-->

<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 />