title: How to keep user's scrolling place when resizing div
body: <p>I wanted to do a cool menu effect for a website I'm working on. I'm having a div act as the the section for the main content. When the user opens the menu, the main content div will resize and move out of the way, revealing the menu. However, when I do this with the code I have written, it always loses my scrolling place on the page. Is there any way to keep my place on the page when it shrinks and also when it expands back again? Below is what I have. Thank you in advance!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function shrinkPage() {
     
     var element = document.getElementById("mock-body");
     element.classList.toggle("mock-body-on-burger");
     
     var z = document.getElementById("mock-body-container");
     z.classList.toggle("mock-body-container-on-burger");
     
     var x = document.getElementById("body");
     x.classList.toggle("body-on-burger");
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
   margin: 0;
   background:#000;
  }
  
  .body-on-burger {
   max-width: 100%;
   overflow-x:hidden;
  }
  
  .mock-body-container{
   height:100vh;
  }
  
  .mock-body-container-on-burger {
   height:100vh;
   transform: scale(0.4) translate(130%);
   overflow: hidden;
  }
  
  .mock-body-size-change{
   overflow: scroll;
  }
  
  .mock-body {
   position:relative;
   background: #fff;
   margin-left: 50px;
  }
    
  .container {
   position: fixed;
   height:50px;
   width:50px;
   cursor: pointer;
  }
  
  .container #icon {
   width: 16px;
   height: 8px;
   position: relative;
   margin: 0px auto 0;
   top: 40%;
  }
  
  .container #icon .bars {
   height: 1px;
   background: #fff;
  }
  
  .myDiv {
   height:500px;
  }
  
  .one {
   background:red;
  }
  
  .two {
   background:green;
  }
  
  .three {
   background:blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body id="body"&gt;
  
  
  
   &lt;div class="menu-activator" onclick="shrinkPage()"&gt;
    &lt;div class="container usd"&gt;
     &lt;div id="icon"&gt;
      &lt;div class="bars first"&gt;&lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   
   
   &lt;div id="mock-body-container" class="mock-body-container"&gt;
    &lt;div id="mock-body" class="mock-body"&gt;
     &lt;div class="myDiv one"&gt;&lt;/div&gt;
     &lt;div class="myDiv two"&gt;&lt;/div&gt;
     &lt;div class="myDiv three"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
     &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>