SCSS

by Kevin

HTML

<div class="menuBtn">Menu</div>

<div class="menu">
  <div class="menuTxt">
    <ul class="menuTxtWrap">
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
      <li>Link 5</li>
    </ul>
  </div>
</div>

<div class="info">
<h1>Top Of Page</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est dolore iusto voluptatibus doloribus repudiandae aut laudantium voluptates perspiciatis velit! Repudiandae natus, obcaecati harum deserunt, omnis porro reprehenderit laborum esse impedit similique ullam perspiciatis nihil incidunt saepe facilis aperiam dolore soluta voluptatibus quisquam praesentium libero sint. Minus quae alias deleniti nobis ratione rem saepe, cupiditate fugiat!</p>
  <p>Quae, totam laudantium culpa, accusamus fugiat minima reiciendis excepturi, iusto autem aliquam rerum quo nulla repellendus obcaecati aspernatur. Neque iure velit, expedita eius error nisi dignissimos veritatis vel quis unde reprehenderit, perferendis dolorum magni libero molestiae laborum minima architecto consequatur animi, tempore amet. Quaerat vel deserunt a fugit veritatis nostrum tenetur laudantium voluptatibus laborum inventore!</p>
  <p>Dolorem tenetur voluptates non necessitatibus nulla accusamus provident illum laboriosam blanditiis recusandae exercitationem fugiat illo magni, dolorum, reprehenderit! Iure commodi, recusandae vel! Assumenda ut sapiente, quo, libero est non mollitia? Iusto sit temporibus dignissimos consequatur tenetur quos nihil facere, culpa amet mollitia at ducimus placeat, quasi harum natus blanditiis sunt! Distinctio aperiam praesentium dolore, inventore!</p>
  <p>Fugit atque odit, saepe incidunt modi magnam illo laboriosam debitis, ab similique tenetur earum placeat deleniti et ullam neque voluptatibus quam nihil, doloremque dignissimos pariatur! Cum velit, saepe, soluta libero temporibus odio. Exercitationem voluptates accusantium deleniti perferendis neque eius architecto modi est cupiditate explicabo...

SCSS

$blue: #20262E;
$dBlue: darken($blue, 5);

body {
  background: $blue;
  padding: 20px;
  font-family: Helvetica;
  color: white;
  margin: 0;
  font-size: 13px;
  &.noScroll{
		position: fixed;
	  overflow-y: scroll;
	  /* width: 100%; */
	}
}

.menuBtn{
  border: 2px solid #FFF;
  font-style: italic;
  padding: 5px 10px;
  display: inline-block;
  position: fixed;
  background-color: $blue;
  top: 20px;
  left: 20px;
  z-index: 999999;
  cursor: pointer;
}

.menu{
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: rgba($dBlue, 0.9);
  z-index: 999998;
  top: -100%;
  left: 0;
  transition: top 0.5s cubic-bezier(.25,.8,.25,1);
  &.open{
    top: 0;
    transition: top 0.5s cubic-bezier(.25,.8,.25,1);
  }
  .menuTxt{
    width: 100%;
    height: 100vh;
    position: relative;
    ul{
      &.menuTxtWrap{
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 999999;
        margin: 0;
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        padding: 0;
        li{
          list-style: none;
          padding: 10px 0;
        }
      }
    }
  }
}

.info{
  padding-top: 35px;
}

JavaScript

//######################
//###### Attemp 1 ######
//######################

/* function lockScroll(e) {
  e.preventDefault();
}

$('.menuBtn').click(function(){

  if( $('.menu').hasClass('open') ){
    $('body').unbind('mousewheel touchmove', lockScroll);
    $('.menu').removeClass('open');
  }
  
  else{
    $('body').bind('mousewheel touchmove', lockScroll);
    $('.menu').addClass('open');
  }
  
}); */



//######################
//###### Attemp 2 ######
//######################

$('.menuBtn').click(function(){

  if( $('.menu').hasClass('open') ){
    $('body').css('top', - ($(window).scrollTop()) + 'px').removeClass('noScroll');
    $('.menu').removeClass('open');
  }
  
  else{
    $('body').css('top', - ($(window).scrollTop()) + 'px').addClass('noScroll');
    $('.menu').addClass('open');
  }
  
});



//######################
//###### Attemp 3 ######
//######################

/* $('.menuBtn').click(function(){

  var scrollDisabled = false,
      scrollTop;

  if( $('.menu').hasClass('open') ){
  
    $('body').removeClass('noScroll');
    $(window).scrollTop(scrollTop);

    scrollDisabled = false;
    
    $('.menu').removeClass('open');
  }
  
  else{

    scrollTop = $(window).scrollTop();

    $('body').addClass('noScroll')
      .css({
        top: -1 * scrollTop
    });

    scrollDisabled = true;
    $('.menu').addClass('open');
  }
  
}); */