Question

我想制作一个像这个网址的粘贴标题：http://www.cssplay.co.uk/layouts/fixit.html已经完成了！但是把这个网址放在iPad的Safari上，它也无法修复标题。

有没有人知道如何在iPad Safari上做粘贴标题？

提前致谢！

Answer 1

事实上，您需要为iOS设备（iPad，iPhone等）解决此问题，只需在CSS中添加以下内容：

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

这个例子假设：

要滚动的部分在标题下方120px处开始（即标题将是120px高）
您想要滚动的div有一个id ='container'
您将使用2个手指滚动它。如果你用一根手指然后标题也会移动。

这实际上在iPad上非常酷，因为它为用户提供了一个选择（移动整个事物或通过使用一个或两个手指保持标题可见）。它也适用于页脚（更改底部值）。

最后请注意，这是针对“Apple”浏览器（我在iPad和Mac Safari和Chrome上成功测试过），所以如果你想支持别的东西，你必须使用以下内容创建不同的代码：

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

2011年10月7日编辑：thx到chris-barr.com我找到了这个解决方案。只需添加以下代码：

<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')">

它可以在iOS（iPhone，iPad）和Android上使用，只需一个手指!!!

Answer 2

网页的优点在于您可以随时轻松检查其源代码。

查看页面源代码，您将在定义的css部分中看到 #header

position:fixed;

以及尺寸和其他格式说明。

在iPad上的Safari中制作网页的Sticky标题

2 个答案: