title: jquery scrolltop() returns value of previous scroll position
body: <p>I am using jquery function <code>element.scrollTop()</code> to get the current scroll position of the page using following line:</p>
  
  <pre><code>var currentScrollPosition=  $('html').scrollTop() || $('body').scrollTop();
  </code></pre>
  
  <p>But it always return a value of previous scroll position. Please check the code below (which is same as is <a href="https://jsfiddle.net/5r74m54x/1/" rel="nofollow">in here</a>). 
  As you can try yourself and see in the code, after each tiny scroll, we get following series of values:</p>
  
  <p><strong>(1: when code is first run and no move is made yet)</strong></p>
  
  <p>delta:0</p>
  
  <p>cumulativeDelta:0</p>
  
  <p>functionCallCount:0</p>
  
  <p>currentScrollPosition:0</p>
  
  <p><em>(delta gives how much is scrolled, cumulativeDelta gives total amount of scroll, functionCallCount is how many times you scrolled and currentScrollPosition is value returned by scrolltop() )</em></p>
  
  <p><strong>(2: when scrolled a little)</strong></p>
  
  <p>delta:-120</p>
  
  <p>cumulativeDelta:-120</p>
  
  <p>functionCallCount:1</p>
  
  <p>currentScrollPosition:0</p>
  
  <p><em>(note here, currentScrollPosition is still not updated)</em></p>
  
  <p><strong>(3: when scrolled a little further)</strong></p>
  
  <p>delta:-120</p>
  
  <p>cumulativeDelta:-240</p>
  
  <p>functionCallCount:2</p>
  
  <p>currentScrollPosition:90.90908893868948</p>
  
  <p><em>(here, cumulativeDelta, which is addition of total scroll made so far, is doubled and currentScrollPosition is updated for the first time)</em></p>
  
  <p><strong>(4: when scrolled a little more)</strong></p>
  
  <p>delta:-120</p>
  
  <p>cumulativeDelta:-360</p>
  
  <p>functionCallCount:3</p>
  
  <p>currentScrollPosition:181.81817787737896</p>
  
  <p><em>(now, cumulativeDelta is tripled while currentScrollPosition is doubled. Hence, this is value after two scrolls but is updated adter 3 scrolls)</em></p>
  
  <p>I apologize for long question, but would have been difficult to ask otherwise. I would like to know why is this happening and if I should use this function some other way there are any alternative to this function.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener("mousewheel", MouseWheelHandler);
  var cumulativeDelta = 0,
    functionCallCount = 0;
  
  function MouseWheelHandler(e) {
    e = window.event || e; // 'event' with old IE support
    var delta = e.wheelDelta || -e.detail; // get delta value
  
    cumulativeDelta += delta;
    functionCallCount += 1;
    currentScrollPosition = $('html').scrollTop() || $('body').scrollTop();
  
    document.getElementById("info1").innerHTML = "delta:" + delta;
    document.getElementById("info2").innerHTML = "cumulativeDelta:" + cumulativeDelta;
    document.getElementById("info3").innerHTML = "functionCallCount:" + functionCallCount;
    document.getElementById("info4").innerHTML = "currentScrollPosition:" + currentScrollPosition;
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    height: 2000px;
    border: solid red 3px;
  }
  .normalPart {
    border: solid green 2px;
    height: 900px;
  }
  .stationary {
    position: fixed;
    top: 0px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="stationary"&gt;
    &lt;div id="info1"&gt;&lt;/div&gt;
    &lt;div id="info2"&gt;&lt;/div&gt;
    &lt;div id="info3"&gt;&lt;/div&gt;
    &lt;div id="info4"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>