You seem to be adding scrollbars to both the body and html elements which is confusing things. You also need to negate the margin/padding on the root elements.
I would do it more simply like this.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Description" lang="en" content=".">
<style>
html,body{margin:0;padding:0}
/* Overlay style */
.overlay {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(153,204,51,0.9);
z-index: 100;
overflow-y:scroll;
}
/* Overlay closing cross */
.overlay .overlay-close {
position: absolute;
right: 20px;
top: 20px;
}
/*never a good idea
html , body {
overflow-x: hidden;
}
*/
/* Menu style */
.overlay nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay ul li a:hover,
.overlay ul li a:focus {
color: #f0f0f0;
}
/* Effects
html, body {
overflow-x: hidden;
}
*/
#MainSection {
overflow-x: hidden;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
#MainSection.overlay-open {
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
#MainSection::after {
content: '';
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
#MainSection.overlay-open::after {
visibility: visible;
opacity: 1;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.overlay-contentpush {
background: rgba(153,204,51,1);
visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
transition: transform 0.5s, visibility 0s 0.5s;
}
.overlay-contentpush.open {
visibility: visible;
-webkit-transform: translateX(0%);
transform: translateX(0%);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
</style>
</head>
<body>
<div id = 'MainSection'>
<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 />
<a href='#nogo' class="trigger-overlay ">Open form</a>
<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 />
</div>
<!-- overlay -->
<div class="overlay overlay-contentpush">
<div class = "overlay-inside">
<button type="button" class="overlay-close">Close</button>
<div class = 'row'>
<div id="contact_form" class = 'container-wide'>
<form name="contact" action="">
<ul>
<li>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" required />
<label class="error" for="name" id="name_error">This field is required.</label>
</li>
<li>
<label for="email" id="email_label">Email</label>
<input type="email" name="email" id="email" size="30" value="" class="text-input" />
<label class="error" for="email" id="email_error">This field is required.</label>
</li>
<li>
<label for="phone" id="phone_label">Phone</label>
<input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
<label class="error" for="phone" id="phone_error">This field is required.</label>
</li>
<li>
</ul>
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</form>
<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 /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
</div> <!--overlay-->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/classie/1.0.1/classie.js"></script>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<script>
(function() {
var container = document.querySelector( '#MainSection' ),
//change this to work by class..
//triggerBttn = document.getElementById( 'trigger-overlay' ),
triggerBttn = document.getElementsByClassName( 'trigger-overlay' ),
overlay = document.querySelector( 'div.overlay' ),
closeBttn = overlay.querySelector( 'button.overlay-close' );
transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
support = { transitions : Modernizr.csstransitions };
function toggleOverlay() {
if( classie.has( overlay, 'open' ) ) {
classie.remove( overlay, 'open' );
classie.remove( container, 'overlay-open' );
classie.add( overlay, 'close' );
var onEndTransitionFn = function( ev ) {
if( support.transitions ) {
if( ev.propertyName !== 'visibility' ) return;
this.removeEventListener( transEndEventName, onEndTransitionFn );
}
classie.remove( overlay, 'close' );
};
if( support.transitions ) {
overlay.addEventListener( transEndEventName, onEndTransitionFn );
}
else {
onEndTransitionFn();
}
}
else if( !classie.has( overlay, 'close' ) ) {
classie.add( overlay, 'open' );
classie.add( container, 'overlay-open' );
}
}
//change this to work by class..
//triggerBttn.addEventListener( 'click', toggleOverlay );
for (x=0;x<triggerBttn.length;x++) {
triggerBttn[x].addEventListener( 'click', toggleOverlay );
}
closeBttn.addEventListener( 'click', toggleOverlay );
})();
</script>
<script>
$('.trigger-overlay').click(function() {
$('body').css('overflow', 'hidden');
$('body').bind('touchmove', function(e) {
e.preventDefault()
});
$('.overlay').on('touchmove touchstart', function (e) {
e.stopPropagation();
});
});
$('.overlay-close').click(function() {
$('body').css('overflow', 'auto');
$('body').unbind('touchmove');
});
</script>
</body>
</html>
The above is a working demo so just copy and paste to test.
Of course I don’t know what else was going on but the overlay should be straight forward. No need to mess about with position:fixed on the body just hide the scrollbar on the body when the overlay is open.
The page was jumping to the top because you use an anchor to trigger the overlay and used # as the destination which makes the page jump to the top. Either return false in the js or just set a non existent fragment identifier and it won’t go anywhere.
e.g.
<a href='#nogo' class="trigger-overlay ">Open form</a>
Or use a button instead of a link.
