title: Hiding visibility hides image but still reveals space taken by hidden element
body: <p>A fixed navbar appears when the user scrolls past the logo in the header(100vh). (The point at which this switch happens is at 220px scrolltop.) Making use of javaScript's <code>.visibility: hidden/visible</code>, this works as desired in the <a href="https://jsfiddle.net/qz7531bu/59/" rel="nofollow"><strong>jsfiddle</strong></a></p>
  
  <p>On the localhost, however, it works but once the navbar appears at 220px, the remainder of the header(100vh <em>minus</em> 200px) shows below the navbar as white(only the image is hidden). What could the issue be?</p>
  
  <p>The code on the localhost is exactly the same as in the fiddle &amp; there are no console errors.</p>
  
  <p><strong>Would also like to add</strong> that I'm not using jquery because it causes a conflict with another item using jquery inspite of using <code>jQuery.noConflict();</code>.</p>