title: Changing Position of DIV on Scroll
body: <p>I have a table </p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt; &lt;td&gt; ---- asp.net gridview &lt;/td&gt;
  &lt;td&gt; &lt;div class=persondetails&gt; &lt;/div&gt; &lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>My javascript got from another forum article</p>
  
  <pre><code>&lt;script language="javascript" type="text/javascript"&gt;
          var personDetail = document.querySelector('.persondetails');
          alert (personDetail);
          var origOffsetY = personDetail.offsetTop;
          debugger;
          function onScroll(e) {
              debugger;
              window.scrollY &gt;= origOffsetY ? personDetail.classList.add('sticky') :
                                              personDetail.classList.remove('sticky');
          }
  
          document.addEventListener('scroll', onScroll);
      &lt;/script&gt;
  </code></pre>
  
  <p>My asp.net gridview grows vertically depending on the no. of persons.  When a person on the grid is selected, the div on the second td is populated with some fields.  It works fine.  </p>
  
  <p>When the list grows too large, and I have to select a person at the bottom, the person details on the right side is shown at the top. This makes users to scroll up to see the details of the person selected in the grid at the bottom of the page.</p>
  
  <p>Is there a way to show the div on the right side td to scroll down when users scroll down the page?  I checked other links on this forum but didn't work out.  I'm not sure if this due to my table and td layout.</p>
  
  <p>I get null at the alert specified.</p>