2

I want to make a sticky header like this url: http://www.cssplay.co.uk/layouts/fixit.html has done! But put this url on Safari of iPad, it also fails to fix the header.

Does anyone knows how to do sticky header on iPad Safari?

Thanks in advance!

Scott Chu
  • 972
  • 14
  • 26

2 Answers2

2

In fact all you need to address this issue for iOS devices (iPad, iPhone, etc) is to add the following to your CSS:

#container {
  position:fixed; 
  top:120px;
  bottom:0px; 
  overflow:auto; 
}

This example is assuming that:

  • the part you want to scroll starts 120px below your header (ie the header will be 120px high)
  • the div you want to have scrolling has an id='container'
  • you will use 2 fingers to scroll it. If you use one finger then the header will move as well.

This actually is pretty cool on iPad as it gives the user a choice (move the whole thing or keep the header visible by using one or two fingers). It also works for footers (change bottom value).

Finally note that this is for "Apple" browsers (I successfully tested it on iPad and Mac Safari and Chrome) so if you want to support something else you WILL have to create different codes using something like :

if (navigator.userAgent.match("Apple") == null) {
    /* use a different container id */
}

Edit on Oct 7, 2011: Thx to chris-barr.com I found this solution. Simply add this code:

<script>
function touchScroll(id){
    var el=document.getElementById(id);
    var scrollStartPos=0;

    document.getElementById(id).addEventListener("touchstart", function(event) {
        scrollStartPos=this.scrollTop+event.touches[0].pageY;
        event.preventDefault();
    },false);

    document.getElementById(id).addEventListener("touchmove", function(event) {
        this.scrollTop=scrollStartPos-event.touches[0].pageY;
        event.preventDefault();
    },false);
}
</script>

<body onload="touchScroll('container')">

and it will work in iOS (iPhone, iPad) AND Android WITH ONLY ONE FINGER !!!

DrMadder
  • 36
  • 3
  • The CSS solution is now worked on iOS5 but the scroll speed becomes slower. Is it a problem of iPad Safari? – Scott Chu May 17 '12 at 08:48
  • It seems that if I do the fixed header, the default flick and flinch toucch gestures when scrolling of Safari is gone and cause a "lag" feeling from user pov. – Scott Chu May 22 '12 at 04:16
0

The nice thing with web pages is that you can always easily inspect its source code.

Look at the page source and you will see #header in the css section defining 

position:fixed;

as well as sizes and other formatting instructions.

Eiko
  • 25,601
  • 15
  • 56
  • 71
  • As I told in my question, even that url can't fix header on Safari on iPad. – Scott Chu Aug 20 '10 at 09:39
  • It *is* fixed. You can scroll the content below it with two fingers. When moving the header as well, you don't scroll but move the *whole page* on Safari's background. – Eiko Aug 20 '10 at 10:17
  • on iOS5, this now works but the scroll speed becomes slower. Is it a problem of iPad Safari? – Scott Chu May 17 '12 at 08:47