To respond to user1530249, or anyone else who has the same question (several years later, oops) you would adjust this area in the <div> you created. Similar to using width calc of 100% - 10px to allow the navigation bar to be interactive while leaving the transparent overlay covering the document body, you would adjust the top input. You'll likely need to play with it and find the right amount to enter instead of top 10px, that is a placeholder for this purpose.

<div style="position: relative; width: 100%; height: 90vh;">
          <div style="
            position: absolute;
            top: 0;
            left: 0;
            width: calc(100% - 10px);  /* Leave room for scrollbar */
            height: 100%;
            background: transparent;
            z-index: 10;
          "></div>

So changing above to: 

<div style="position: relative; width: 100%; height: 90vh;">
  position: absolute;
  top: 10px;             /* Start overlay 10px down */
  left: 0;
  width: calc(100% - 10px);
  height: calc(100% - 10px); /* Reduce height so it still ends at bottom */
  background: transparent;
  z-index: 10;
"></div>