title: jquery change input value when scroll to div
body: <h1>Edited:</h1>
  <p>resolved by <a href="https://stackoverflow.com/questions/24979663/jquery-change-input-value-when-scroll-to-div#24979865">#24979865</a></p>
  <p>I tried to change value of input when the mouse scrolled to that page.</p>
  <p><a href="http://jsfiddle.net/ya7dz/3/" rel="nofollow noreferrer">JSFIDDLE</a></p>
  <p>HTML :</p>
  <pre><code>&lt;div class=&quot;pagenum&quot;&gt;
      Page num: &lt;input type=&quot;text&quot; id=&quot;pagenum&quot;&gt; / 3
  &lt;/div&gt;
  &lt;div class=&quot;page-container&quot;&gt;
      &lt;div class=&quot;page&quot; id=&quot;page-1&quot; data-page-no=&quot;1&quot;&gt;
          This is div #1
      &lt;/div&gt;
      &lt;div class=&quot;page&quot; id=&quot;page-2&quot; data-page-no=&quot;2&quot;&gt;
          This is div #2
      &lt;/div&gt;
      &lt;div class=&quot;page&quot; id=&quot;page-3&quot; data-page-no=&quot;3&quot;&gt;
          This is div #3
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.page-container{
      padding-top: 30px;
      width: 300px;
      height: 1500px;
  }
  .page {
      height: 300px;
      border: 1px solid #000;
      margin: 5px;
  }
  .pagenum {
      background: #fff;
      position: fixed;
      border: 1px solid #000;
      width: 300px;
  }
  </code></pre>
  <p>JS :</p>
  <pre><code>$(window).scroll(function(event) {
    var pagenum = $('.page').attr('data-page-no');
    $(&quot;#pagenum&quot;).val(pagenum);
  });
  </code></pre>
  <p>But it can not do as I want.</p>
  <p>Anybody can help me?</p>
  <p>More: when filling a number to input box, I want to animate to that page.</p>
  <p>Thanks for edited my post.</p>