title: How to handle "scroll" and "zoom" event for fixed-positioned element?
body: <p>So I have a supposedly fixed-positioned element that I want to fix on the viewport at the top-right corner.</p>
  
  <p>This is the HTML:</p>
  
  <pre><code>&lt;div class = "header"&gt;
  &lt;p&gt;This is a heading with an absolute position&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS:</p>
  
  <pre><code>.header {
  position: absolute;
  right:10px;
  top: 10px;
  }
  </code></pre>
  
  <p>It works as desired until you scroll to right with a laptop or zoom in with a mobile device. Either these two events will shift the element to left depending on the extent the events are.</p>
  
  <p>I came up with 2 solutions:</p>
  
  <p>1: make a div container at the top with the width as 100% and make the element relative to the container. <strong>This failed as when I scroll the window the container does not extend accordingly</strong></p>
  
  <p>2: add an event listener listening to two events <code>scroll</code> and <code>touchend</code>.</p>
  
  <pre><code>$(window).scroll(function(){
  $(".header").css({"right": "10px", "top": "10px"});
  });
  
   $(document.body).bind("touchend", function(){
    $(".header").css({"right": "10px", "top": "10px"});
  });
  </code></pre>
  
  <p><strong>I wanted to update the element at every selected event and make it always the same position relative to the viewport but this method failed too. Seems like the css will only position the element according to the original viewport</strong></p>
  
  <p>Is there a simple yet efficient solution for this issue?</p>