title: Show/Hide Element on Scroll Using Javascript Only
body: <p>I am building a very light wp theme. The sidebar has few widgets, filling two page length only. Now, I want to utilize the rest of the sidebar when the widgets are out of sight as the user scrolls down. This would be great especially if the article is very long.</p>
  
  <p>Floating element using jquery is common. As what I've said, this is supposed to be very light theme. jQuery is very heavy. Is it possible to use javascript only, even just appear and disappear, to display an element at certain page length?</p>
  
  <p>Note: This theme is responsive.</p>
  
  <p>[UPDATE] Problem solved! Thanks to all.</p>
  
  <p>I saved 100kb+ bandwidth for jQuery.</p>
  
  <p>As a reference to others, here is the new script.</p>
  
  <pre><code>&lt;script defer type="text/javascript"&gt;var width = window.innerWidth || document.documentElement.clientWidth;
  //Trigger the script only on browser width above 1150px. Recommended on responsive websites
  if (width &gt; 1150){ function testScroll(ev){
  //Will set the position to FIXED with TOP=80px when user scrolls 850px below. 
  if(window.pageYOffset&gt;850){document.getElementById("targetID").style.position = "fixed";document.getElementById("targetID").style.top = "80px";} 
  //Will set the position to ABSOLUTE with TOP=AUTO when user scrolls to top just above 850px line
  else {document.getElementById("targetID").style.position = "absolute";document.getElementById("targetID").style.top = "auto";};
  window.onscroll=testScroll; };
  &lt;/script&gt;
  </code></pre>