how to prevent scrolling through fixed element

Question

I've this html setup...

body
  .top
  .content

top is fixed fullscreen popup with some other content in it. However, while scrolling reaches to an end in the .top>ul the background item starts to scroll. Which is very nauseating and makes site all slowish on tablets.

On tablets, even when i add overflow hidden to body using jquery it doesn't prevents it for some reason from scrolling the background even sometimes when it's not reached end.

I want no scrolling of background page when popup is on top of the page. It's suppose to be a new slide.

What can i do preferable structure wise, then css, and lastly js.

Demo http://jsfiddle.net/techsin/0bv9g31k/

* {padding: 0; margin: 0;}
.top {
    position: fixed;
    background-color: rgba(0,0,0,.3);
    height: 100%;
    width: 100%;
    overflow: auto;
}

ul {
    text-align: center;
    background-color: rgba(23,44,134,.8);
    color: #fff;

    box-sizing: border-box;
    overflow: auto;
    height: 300px;
    width: 50%;
    margin: auto;
    position: absolute;
    top: 0; bottom: 0;
    left:0;
    right:0;
    overflow: hidden;
}

.cont {
    width: 400px;
    margin: auto;
}

Answer 1

These functions freeze and unfreeze the body element, while allowing children to scroll if they have the appropriate overflow property:

function freeze() {
  var top= window.scrollY;

  document.body.style.overflow= 'hidden';

  window.onscroll= function() {
    window.scroll(0, top);
  }
}

function unfreeze() {
  document.body.style.overflow= '';
  window.onscroll= null;
}

Working Fiddle