jquery scrolltop() returns value of previous scroll position
<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>