隐藏在移动设备上的标题，直到用手指拉下答案

【问题标题】：header hidden on mobile device until pulled down with finger隐藏在移动设备上的标题，直到用手指拉下
【发布时间】：2013-06-12 15:59:19
【问题描述】：

我正在构建一个移动网站（非本地）以在 iPhone 4 上运行。我需要一些“标题”内容，大约 80 像素高和 100% 宽，除非用户滑动/拉动，否则这些内容始终隐藏在任何显示的内容上向下。

这篇文章几乎完全符合我的要求：

http://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-solution/

问题在于它比我需要的更复杂，并且做了一些我不需要的附加操作。我尝试将它连接到我现有的 web 应用程序中，但它提升了所有样式并且不能正常工作。他们使用了很多我不想要的样式。在我花更多时间改变他们的样式并试图弄清楚哪些样式对于下拉效果至关重要，哪些是无关紧要的之前，我想看看是否有人有更简单的方法来实现这一点。

目标：手指在我的移动网页上的任意位置向下滑动，我的隐藏标题会向下滑动到视图中。释放时，标题会向上滑回并再次不可见。我不需要比这更高级的了。

相关问题：当手指向下拉网页时，会触发移动浏览器上的什么“事件”？那是“onscroll”还是类似的？还是手机独有的东西？

谢谢。

【问题讨论】：

听起来是个不错的解决方案...但我是否必须在 url 查询字符串中提供一个锚点才能使其工作？我不想让网址变得混乱……还有其他方法可以做锚吗？
是的。我已将评论移至答案。

标签： html css jquery-mobile mobile

【解决方案1】：

由于您希望在任何显示的内容上都出现这种情况，您可以使用锚点在页眉下方开始页面；因此，下拉页面（向上滚动到页面的“顶部”）将显示您的标题。您可以使用 onload() javascript 事件使页面自动跳转到您的锚点：

<script type="text/javascript">
function load() {
    var urllocation = location.href;
    if(urllocation.indexOf("#anchor") > -1){
        window.location.hash="anchor"; 
    } else {
    return false;
    }
}
</script>
<body onload="load()">

【讨论】：

理论上我喜欢这种方法，但它并没有达到我想要的效果。它所做的只是隐藏我 iphone 上的地址栏，而不是将顶部标题向上滚动到视野之外。我已将锚标记放置在不同的地方，但总是得到相同的结果。此外，您的代码中存在错误。应该是 if(urllocation.indexOf("#anchor") == -1){
更正，它没有隐藏地址栏，这只是页面加载几秒钟后的正常 iphone 行为。锚的东西真的根本不起作用，不知道为什么。