title: how to move div with the scrollbar in jQuery
body: <p>I have an image div like this</p>
  
  <pre><code>&lt;div class="bgCover"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div class="overlayBox" style="position: fixed; background-image: url(../images/header.jpg)"  &gt;
  
      &lt;div class="overlayContent"&gt;
  
          &lt;a href="javascript:void()" class="closeLink"&gt;Close&lt;/a&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I am using jQuery to open the box like this</p>
  
  <pre><code>function getScrollTop() {
  
      if (typeof window.pageYOffset !== 'undefined' ) {
          // Most browsers
          return window.pageYOffset;
      }
  
      var d = document.documentElement; //IE with doctype
  
      if (d.clientHeight) {
          // IE in standards mode
          return d.scrollTop;
      }
  
      // IE in quirks mode
      return document.body.scrollTop;
  
  } //end of getScrollTop()
  
  function doOverlayOpen() {
      ...
      showOverlayBox();
  }
  
  function showOverlayBox() {
  
      var scroll = getScrollTop();
      var top;
  
      if (scroll &lt;= 28) {
          top = "30";
      }
      else {         
        top = (scroll + 2) ;
      }
  
      // set the properties of the overlay box, the left and top positions
      $('.overlayBox').css({
  
          display:'block',
          position:'absolute',
          left:( $(window).width() - $('.overlayBox').width() )/2,          
          top:top
  
      });
  
      // set the window background for the overlay. i.e the body becomes darker
      $('.bgCover').css({
  
          display:'block',
          width: $(window).width(),
          height:$(window).height()
  
      });
  }
  </code></pre>
  
  <p>This open the box with respect to the scroll bar. But the problem is once the overlayBox is open, and then i move the scroll bar, then this div remain at it's position. I want that if user move the scroll bar then this div also move up and down. </p>
  
  <p>I think i need to adjust the top, left corener of the overlayBox div with the scrollbar top.. Need to define a function that checks if scrollbar moves then move the div accordingly. Do i need delegation here or...  How can i do it?</p>
  
  <p>Here are the images, in image 2 you can see, if i move the scrollbar then my image div don't move</p>
  
  <p><img src="https://i.stack.imgur.com/CCyYD.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/Y6Fjj.png" alt="enter image description here"></p>
  
  <p>Thanks</p>