Question

this function is supoused to work in iphone,

$(document).ready(function() {
    $('#head').css('position','fixed');
  window.onscroll = function() {
      document.getElementById('head').style.top =
         (window.pageYOffset + window.innerHeight + 25) + 'px';
        // alert((window.pageYOffset + window.innerHeight - 25) + 'px');
    };
});

but it’s supoused to keep the div (25px) at the bottom of the page, i need it on top of the page no matter how much i scroll

i’m tring like this

$(document).ready(function() {
    $('#head').css('position','fixed');
    var height = $('#head').height();
  window.onscroll = function() {
      document.getElementById('head').style.top =
         (window.pageYOffset) - height + 'px';
        // alert(window.pageYOffset); alert(window.innerHeight);
    };
});

but it seems that the #head div is not following properly the scroll (it seems like it bounces), any idea what i’m missing??

Answer 1

Position fixed do not work in iPhone. So it is bound to bounce whenever you scroll the page until the scroll handler set its new position.

$(document).ready(function() {
    $('#head').css('position','absolute');
    $(window).scroll(function() {
      $('#head').css({
         top: window.pageYOffset
      });
    });
});