Make Sticky header of web page in Safari on iPad
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!
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 !!!
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.
加载中,请稍侯......
精彩评论