Szorstki,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<style>
div {
height: 2000px;
border: 1px solid black;
}
</style>
<script>
$(function () {
var keys = { 37: 1, 38: 1, 39: 1, 40: 1, 32: 1, 36 : 1, 35: 1 };
$('.nav-icon').click(function () {
$('body').toggleClass('nav-active');
});
$('body').on({
'mousewheel DOMMouseScroll': function (e) {
if ($('body').hasClass('nav-active')){
e.preventDefault();
e.stopPropagation();
}
},
'keydown': function (e) {
var key = e.keyCode
if (keys[key] && $('body').hasClass('nav-active')) {
e.preventDefault();
e.stopPropagation();
}
if (key == 27) {
$('body').removeClass('nav-active')
}
}
})
})
</script>
<div class="nav-icon"><span><span class="invisible">Меню</span></span></div>
</body>
</html>