title: SetInterval inside scrolling events on iPhone - Why this code doesn't work?
body: <p>Please, take a look at this code (I'm using Zepto <a href="http://zeptojs.com/" rel="nofollow">http://zeptojs.com/</a> BTW)...</p>
  
  <pre><code>var timer = false;
  
  $(window).bind('touchstart touchmove scroll', function (e) {
      if (timer === false) {
          timer = setInterval(function () {
              $('footer').css('top', (this.pageYOffset + this.innerHeight - 40) + 'px');
              console.log('Adjusted...');
          }, 100);
      }
  }).bind('touchend', function () {
      clearInterval(timer);
      timer = false;
      console.log('Cleaned it up...');
  });
  </code></pre>
  
  <p>As you can see, I have a footer element that I'm trying to keep fixed on the bottom of the iPhone screen. I know that there are libraries that helps us make this quite easily like iScroll 4 <a href="http://cubiq.org/iscroll-4" rel="nofollow">http://cubiq.org/iscroll-4</a>, but I was trying to see if I could make it simpler.</p>
  
  <p>It turns out that the code above doesn't work properly. While I'm actually scrolling the page, for some reason setInterval doesn't execute but instead seems to pile up on the background to run every call at the same time.</p>
  
  <p>At the end it doesn't do what I wanted it to do, which is to "animate" the footer and have it in place during scroll not only after. Does anyone has any idea on how such effect could be achieved on some similar manner?</p>
  
  <p>Thanks!</p>