title: Show/hide a div 500 px from top and 500 px before bottom
body: <p>I have a page where I want an image to appear after scrolling say 500px and I used the "If you want to show a div after scrolling a number of pixels, WITHOUT jquery" code snippet from apaul34208 (<a href="https://stackoverflow.com/questions/15798360/show-div-on-scrolldown-after-800px">show div after 800px scroll</a>). My adapted code is like this: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;div id="myID" class="pointer hide"&gt;
      &lt;img src="image.png"&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  myID = document.getElementById("myID");
  
  var myScrollFunc = function () {
  var y = window.scrollY;
  if (y &gt;= 400) {
      myID.className = "pointer show"
  } else {
      myID.className = "pointer hide"
  }
  };
  
  window.addEventListener("scroll", myScrollFunc);
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre><code>.hide {
     display: none;
  }
  
  .show {
     display: block;
     margin-top: -80px;
  }
  </code></pre>
  
  <p>Only problem is that I would also like it to DISAPPEAR again lets say 400 px from the bottom of the page. the page-height differs from page to page so I cant just set a range like underneath from say 400-1000 px. </p>
  
  <pre><code>&lt;script&gt;
   myID = document.getElementById("myID");
  
  var myScrollFunc = function () {
  var y = window.scrollY;
  if (y &gt;= 400 &amp; y &lt;= 1000 ) {
  myID.className = "pointer show"
  } else {
      myID.className = "pointer hide"
  }
  };
  window.addEventListener("scroll", myScrollFunc);
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Anyone have any idea how I can make this happen? </p>
  
  <p>Thanks guys!</p>