2

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

有谁知道如何在 iPad Safari 上做粘性标题？

提前致谢！

4

2 回答 2

2

事实上，为 iOS 设备（iPad、iPhone 等）解决这个问题所需要做的就是在 CSS 中添加以下内容：

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

此示例假设：

  • 您要滚动的部分从标题下方 120 像素开始（即标题将是 120 像素高）
  • 你想要滚动的 div 有一个 id='container'
  • 您将使用 2 个手指滚动它。如果您使用一根手指，那么标题也会移动。

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

最后请注意，这适用于“Apple”浏览器（我在 iPad 和 Mac Safari 和 Chrome 上成功测试了它）所以如果你想支持其他东西，你将不得不使用类似的东西创建不同的代码：

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

2011 年 10 月 7 日编辑：感谢 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 上运行！！！

于 2011-08-18T10:17:18.083 回答
0

网页的好处是您可以随时轻松地检查其源代码。

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

position:fixed;

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

于 2010-08-20T09:37:29.087 回答